Skip to content

Commit 78c2c9a

Browse files
author
m1933
committed
init
1 parent 8ef3b3c commit 78c2c9a

File tree

4 files changed

+691
-232
lines changed

4 files changed

+691
-232
lines changed

‎README copy 2.md‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
# CSS规则
2+
3+
## 术语
4+
5+
### 规则声明
6+
“规则声明”是赋予一个选择器（或一组选择器）以及一组属性的名称。这是一个例子：
7+
```css
8+
.listing {
9+
font-size: 18px;
10+
line-height: 1.2;
11+
}
12+
```
13+
### 选择器
14+
在规则声明中，“选择器”是确定 DOM 树中哪些元素将由定义的属性设置样式的位。选择器可以匹配 HTML 元素，以及元素的类、ID 或其任何属性。以下是选择器的一些示例：
15+
```css
16+
.my-element-class {
17+
/* ... */
18+
}
19+
[aria-hidden] {
20+
/* ... */
21+
}
22+
```
23+
### 特性
24+
最后，属性赋予规则声明中选定的元素其样式。属性是键值对，规则声明可以包含一个或多个属性声明。属性声明如下所示：
25+
26+
```css
27+
/* some selector */ {
28+
background: #f1f1f1;
29+
color: #333;
30+
}
31+
```
32+
33+
## CSS
34+
35+
### 格式化
36+
* 使用软制表符（2 个空格）进行缩进。
37+
* 在类名中优先使用破折号而不是驼峰式命名。
38+
如果您使用 BEM，下划线和 PascalCasing 是可以的（请参阅下面的OOCSS 和 BEM）。
39+
* 不要使用 ID 选择器。
40+
* 在规则声明中使用多个选择器时，为每个选择器指定自己的行。
41+
* 在规则声明中的左大括号之前放置一个空格{。
42+
* 在属性中，在字符后面而不是前面放置一个空格:。
43+
* 将规则声明的右大括号放在}新行上。
44+
* 在规则声明之间放置空行。
45+
46+
**坏的**
47+
```css
48+
.avatar{
49+
border-radius:50%;
50+
border:2px solid white; }
51+
.no, .nope, .not_good {
52+
// ...
53+
}
54+
#lol-no {
55+
// ...
56+
}
57+
```
58+
**好的**
59+
```css
60+
.avatar {
61+
border-radius: 50%;
62+
border: 2px solid white;
63+
}
64+
65+
.one,
66+
.selector,
67+
.per-line {
68+
// ...
69+
}
70+
```
71+
### 评论
72+
* 能用行注释（//在 Sass-land 中）就不用块注释。
73+
74+
### OOCSS 和 BEM
75+
出于以下原因，我们鼓励 OOCSS 和 BEM 的某种组合：
76+
77+
* 它有助于在 CSS 和 HTML 之间创建清晰、严格的关系
78+
* 它帮助我们创建可重用、可组合的组件
79+
* 它允许更少的嵌套和更低的特异性
80+
* 它有助于构建可扩展的样式表
81+
82+
**OOCSS**
83+
84+
OOCSS或“面向对象的 CSS”是一种编写 CSS 的方法，它鼓励您将样式表视为“对象”的集合：可在整个网站中独立使用的可重用、可重复的片段来增强CSS代码的可维护性和重用性的方法论。
85+
86+
**BEM**
87+
BEM或“块元素修饰符”是HTML 和 CSS 中类的命名约定，考虑到了大型代码库和可扩展性，并且可以作为实施 OOCSS 的一套可靠指南。
88+
89+
推荐使用 PascalCased“块”的 BEM 变体，与组件（例如 React）结合使用时效果特别好。下划线和破折号仍然用于修饰符和子元素。
90+
91+
**例子**
92+
93+
```jsx
94+
// ListingCard.jsx
95+
function ListingCard() {
96+
return (
97+
<article class="ListingCard ListingCard--featured">
98+
99+
<h1 class="ListingCard__title">Adorable 2BR in the sunny Mission</h1>
100+
101+
<div class="ListingCard__content">
102+
<p>Vestibulum id ligula porta felis euismod semper.</p>
103+
</div>
104+
105+
</article>
106+
);
107+
}
108+
```
109+
```css
110+
/* ListingCard.css */
111+
.ListingCard { }
112+
.ListingCard--featured { }
113+
.ListingCard__title { }
114+
.ListingCard__content { }
115+
```
116+
* .ListingCard是“块”并代表更高级别的组件
117+
* .ListingCard__title是一个“元素”，代表它的后代，.ListingCard有助于将块组成一个整体。
118+
* .ListingCard--featured是一个“修饰符”，代表块上的不同状态或变化.ListingCard。
119+
120+
## ID选择器
121+
尽量避免在css中使用ID选择器：虽然可以在 CSS 中通过 ID 选择元素，但它通常应被视为反模式。ID 选择器为您的规则声明引入了不必要的高水平特异性，并且它们不可重用。
122+
123+
## JavaScript 钩子
124+
避免在 CSS 和 JavaScript 中绑定到同一个类。将两者混为一谈通常会导致开发人员在重构过程中浪费时间，因为开发人员必须交叉引用他们正在更改的每个类，而最糟糕的是，开发人员因担心破坏功能而不敢进行更改。
125+
126+
我们建议创建要绑定的特定于 JavaScript 的类，前缀为.js-：
127+
128+
<button class="btn btn-primary js-request-to-book">Request to Book</button>
129+
130+
### 变量
131+
优先使用破折号命名的变量名称（例如$my-variable），而不是驼峰命名或蛇形命名的变量名称。可以在仅在同一文件中使用的变量名前添加下划线（例如$_my-variable）。
132+
133+
### 混入
134+
Mixins 应该用于干燥代码、增加清晰度或抽象复杂性——就像命名良好的函数一样。不接受参数的 Mixin 对此很有用，但请注意，如果您不压缩有效负载（例如 gzip），这可能会导致结果样式中出现不必要的代码重复。
135+
--todo
136+
### 扩展指令
137+
@extend应避免使用，因为它具有不直观且潜在危险的行为，尤其是与嵌套选择器一起使用时。如果选择器的顺序后来发生变化（例如，如果它们位于其他文件中并且文件加载的顺序发生变化），即使扩展顶级占位符选择器也可能会导致问题。Gzipping 应该可以处理您通过使用 获得的大部分节省@extend，并且您可以使用 mixin 很好地干燥您的样式表。
138+
--todo
139+
140+
### 嵌套选择器
141+
选择器的嵌套深度不要超过三层！
142+
```css
143+
.page-container {
144+
.content {
145+
.profile {
146+
// STOP!
147+
}
148+
}
149+
}
150+
```
151+
永远不要嵌套 ID 选择器：如果您发现自己这样做，则需要重新审视您的标记，或者弄清楚为什么需要如此强的特异性。如果您正在编写格式良好的 HTML 和 CSS，则永远不需要这样做。
152+
153+
### less
154+
--todo

‎README copy.md‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
# CSS规则
2+
3+
## 术语
4+
5+
### 规则声明
6+
“规则声明”是赋予一个选择器（或一组选择器）以及一组属性的名称。这是一个例子：
7+
```css
8+
.listing {
9+
font-size: 18px;
10+
line-height: 1.2;
11+
}
12+
```
13+
### 选择器
14+
在规则声明中，“选择器”是确定 DOM 树中哪些元素将由定义的属性设置样式的位。选择器可以匹配 HTML 元素，以及元素的类、ID 或其任何属性。以下是选择器的一些示例：
15+
```css
16+
.my-element-class {
17+
/* ... */
18+
}
19+
[aria-hidden] {
20+
/* ... */
21+
}
22+
```
23+
### 特性
24+
最后，属性赋予规则声明中选定的元素其样式。属性是键值对，规则声明可以包含一个或多个属性声明。属性声明如下所示：
25+
26+
```css
27+
/* some selector */ {
28+
background: #f1f1f1;
29+
color: #333;
30+
}
31+
```
32+
33+
## CSS
34+
35+
### 格式化
36+
* 使用软制表符（2 个空格）进行缩进。
37+
* 在类名中优先使用破折号而不是驼峰式命名。
38+
如果您使用 BEM，下划线和 PascalCasing 是可以的（请参阅下面的OOCSS 和 BEM）。
39+
* 不要使用 ID 选择器。
40+
* 在规则声明中使用多个选择器时，为每个选择器指定自己的行。
41+
* 在规则声明中的左大括号之前放置一个空格{。
42+
* 在属性中，在字符后面而不是前面放置一个空格:。
43+
* 将规则声明的右大括号放在}新行上。
44+
* 在规则声明之间放置空行。
45+
46+
**坏的**
47+
```css
48+
.avatar{
49+
border-radius:50%;
50+
border:2px solid white; }
51+
.no, .nope, .not_good {
52+
// ...
53+
}
54+
#lol-no {
55+
// ...
56+
}
57+
```
58+
**好的**
59+
```css
60+
.avatar {
61+
border-radius: 50%;
62+
border: 2px solid white;
63+
}
64+
65+
.one,
66+
.selector,
67+
.per-line {
68+
// ...
69+
}
70+
```
71+
### 评论
72+
* 能用行注释（//在 Sass-land 中）就不用块注释。
73+
74+
### OOCSS 和 BEM
75+
出于以下原因，我们鼓励 OOCSS 和 BEM 的某种组合：
76+
77+
* 它有助于在 CSS 和 HTML 之间创建清晰、严格的关系
78+
* 它帮助我们创建可重用、可组合的组件
79+
* 它允许更少的嵌套和更低的特异性
80+
* 它有助于构建可扩展的样式表
81+
82+
**OOCSS**
83+
84+
OOCSS或“面向对象的 CSS”是一种编写 CSS 的方法，它鼓励您将样式表视为“对象”的集合：可在整个网站中独立使用的可重用、可重复的片段来增强CSS代码的可维护性和重用性的方法论。
85+
86+
**BEM**
87+
BEM或“块元素修饰符”是HTML 和 CSS 中类的命名约定，考虑到了大型代码库和可扩展性，并且可以作为实施 OOCSS 的一套可靠指南。
88+
89+
推荐使用 PascalCased“块”的 BEM 变体，与组件（例如 React）结合使用时效果特别好。下划线和破折号仍然用于修饰符和子元素。
90+
91+
**例子**
92+
93+
```jsx
94+
// ListingCard.jsx
95+
function ListingCard() {
96+
return (
97+
<article class="ListingCard ListingCard--featured">
98+
99+
<h1 class="ListingCard__title">Adorable 2BR in the sunny Mission</h1>
100+
101+
<div class="ListingCard__content">
102+
<p>Vestibulum id ligula porta felis euismod semper.</p>
103+
</div>
104+
105+
</article>
106+
);
107+
}
108+
```
109+
```css
110+
/* ListingCard.css */
111+
.ListingCard { }
112+
.ListingCard--featured { }
113+
.ListingCard__title { }
114+
.ListingCard__content { }
115+
```
116+
* .ListingCard是“块”并代表更高级别的组件
117+
* .ListingCard__title是一个“元素”，代表它的后代，.ListingCard有助于将块组成一个整体。
118+
* .ListingCard--featured是一个“修饰符”，代表块上的不同状态或变化.ListingCard。
119+
120+
## ID选择器
121+
尽量避免在css中使用ID选择器：虽然可以在 CSS 中通过 ID 选择元素，但它通常应被视为反模式。ID 选择器为您的规则声明引入了不必要的高水平特异性，并且它们不可重用。
122+
123+
## JavaScript 钩子
124+
避免在 CSS 和 JavaScript 中绑定到同一个类。将两者混为一谈通常会导致开发人员在重构过程中浪费时间，因为开发人员必须交叉引用他们正在更改的每个类，而最糟糕的是，开发人员因担心破坏功能而不敢进行更改。
125+
126+
我们建议创建要绑定的特定于 JavaScript 的类，前缀为.js-：
127+
128+
<button class="btn btn-primary js-request-to-book">Request to Book</button>
129+
130+
### 变量
131+
优先使用破折号命名的变量名称（例如$my-variable），而不是驼峰命名或蛇形命名的变量名称。可以在仅在同一文件中使用的变量名前添加下划线（例如$_my-variable）。
132+
133+
### 混入
134+
Mixins 应该用于干燥代码、增加清晰度或抽象复杂性——就像命名良好的函数一样。不接受参数的 Mixin 对此很有用，但请注意，如果您不压缩有效负载（例如 gzip），这可能会导致结果样式中出现不必要的代码重复。
135+
--todo
136+
### 扩展指令
137+
@extend应避免使用，因为它具有不直观且潜在危险的行为，尤其是与嵌套选择器一起使用时。如果选择器的顺序后来发生变化（例如，如果它们位于其他文件中并且文件加载的顺序发生变化），即使扩展顶级占位符选择器也可能会导致问题。Gzipping 应该可以处理您通过使用 获得的大部分节省@extend，并且您可以使用 mixin 很好地干燥您的样式表。
138+
--todo
139+
140+
### 嵌套选择器
141+
选择器的嵌套深度不要超过三层！
142+
```css
143+
.page-container {
144+
.content {
145+
.profile {
146+
// STOP!
147+
}
148+
}
149+
}
150+
```
151+
永远不要嵌套 ID 选择器：如果您发现自己这样做，则需要重新审视您的标记，或者弄清楚为什么需要如此强的特异性。如果您正在编写格式良好的 HTML 和 CSS，则永远不需要这样做。

0 commit comments

Comments
 (0)