|
31 | 31 | <a name="rule-declaration"></a> |
32 | 32 | ### 规则声明 |
33 | 33 |
|
34 | | -我们把一个(或一组)选择器与其伴随的属性集合称之为“规则声明”。举个例子: |
| 34 | +我们把一个(或一组)选择器和一组属性称之为 “规则声明”。举个例子: |
35 | 35 |
|
36 | 36 | ```css |
37 | 37 | .listing { |
|
43 | 43 | <a name="selectors"></a> |
44 | 44 | ### 选择器 |
45 | 45 |
|
46 | | -在规则声明中,“选择器”部分将决定样式属性会被应用到 DOM 树中哪些元素。选择器可以匹配 HTML 元素,也可以匹配一个元素的类名、ID, 或者元素拥有的属性。以下是选择器的例子: |
| 46 | +在规则声明中,“选择器” 部分将决定样式属性会被应用到 DOM 树中哪些元素。选择器可以匹配 HTML 元素,也可以匹配一个元素的类名、ID, 或者元素拥有的属性。以下是选择器的例子: |
47 | 47 |
|
48 | 48 | ```css |
49 | 49 | .my-element-class { |
|
117 | 117 | * 建议使用行注释 (在 Sass 中是 `//`) 代替块注释。 |
118 | 118 | * 建议在当行给代码写注释。避免行末注释。 |
119 | 119 | * 为代码作详细的注释,而不是写自述文档,比如: |
120 | | - - z-index 的用处 |
| 120 | + - z-index 的作用 |
121 | 121 | - 兼容性处理或者针对特定浏览器的 hack |
122 | 122 |
|
123 | 123 | <a name="oocss-and-bem"></a> |
124 | 124 | ### OOCSS 和 BEM |
125 | 125 |
|
126 | | -出于以下原因,我们鼓励使用 OOCSS 和 BEM 的组合: |
| 126 | +出于以下原因,我们鼓励使用 OOCSS 和 BEM 的某种组合: |
127 | 127 |
|
128 | 128 | * 可以帮助我们理清 CSS 和 HTML 之间清晰且严谨的关系。 |
129 | 129 | * 可以帮助我们创建出可重用、易装配的组件。 |
130 | 130 | * 可以减少嵌套,降低特定性。 |
131 | 131 | * 可以帮助我们创建出可扩展的样式表。 |
132 | 132 |
|
133 | | -**OOCSS**,也就是 “Object Oriented CSS(面向对象的CSS)”,是一种写 CSS 的方法,其思想就是鼓励你把样式表看作“对象”的集合:可重用性、可重复性的代码段让你可以在整个网站中多次使用。 |
| 133 | +**OOCSS**,也就是 “Object Oriented CSS(面向对象的CSS)”,是一种写 CSS 的方法,其思想就是鼓励你把样式表看作“对象”的集合:创建可重用性、可重复性的代码段让你可以在整个网站中多次使用。 |
134 | 134 |
|
135 | 135 | 参考资料: |
136 | 136 |
|
137 | 137 | * Nicole Sullivan 的 [OOCSS wiki](https://github.com/stubbornella/oocss/wiki) |
138 | 138 | * Smashing Magazine 的 [Introduction to OOCSS](http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/) |
139 | 139 |
|
140 | | -**BEM**,也就是 “Block-Element-Modifier”,是一种用于 HTML 和 CSS 类名的_命名约定_。BEM 最初是由 Yandex 提出的,要知道他们拥有巨大的代码库和可伸缩性,并且可以作为一套贯彻 OOCSS 的参考指导规范。 |
| 140 | +**BEM**,也就是 “Block-Element-Modifier”,是一种用于 HTML 和 CSS 类名的_命名约定_。BEM 最初是由 Yandex 提出的,要知道他们拥有巨大的代码库和可伸缩性,BEM 就是为此而生的,并且可以作为一套遵循 OOCSS 的参考指导规范。 |
141 | 141 |
|
142 | 142 | * CSS Trick 的 [BEM 101](https://css-tricks.com/bem-101/) |
143 | 143 | * Harry Roberts 的 [introduction to BEM](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) |
|
177 | 177 | <a name="javascript-hooks"></a> |
178 | 178 | ### JavaScript 钩子 |
179 | 179 |
|
180 | | -避免在 CSS 和 JavaScript 中绑定相同的类。否则通常会导致以下两种后果:起码在重构的时候,开发者不得不把时间花费在两边对照每个要改变的类;更糟糕的是,开发者甚至会因为害怕破坏功能而不敢作出更改。 |
| 180 | +避免在 CSS 和 JavaScript 中绑定相同的类。否则通常会导致以下两种后果:在重构的时候,开发者轻则浪费时间在对照查找每个要改变的类,重则因为害怕破坏功能而不敢作出更改。 |
181 | 181 |
|
182 | 182 | 我们推荐在创建用于特定 JavaScript 的类名时,添加 `.js-` 前缀: |
183 | 183 |
|
|
262 | 262 | <a name="variables"></a> |
263 | 263 | ### 变量 |
264 | 264 |
|
265 | | -变量名应使用破折号 (例如 `$my-variable`) 代替 camelCased 和 snake_cased 风格。对于仅用在当前文件的变量,可以在变量名之前添加下划线前缀 (例如 `$_my-variable`)。 |
| 265 | +变量名应使用破折号(例如 `$my-variable`)代替 camelCased 和 snake_cased 风格。对于仅用在当前文件的变量,可以在变量名之前添加下划线前缀 (例如 `$_my-variable`)。 |
266 | 266 |
|
267 | 267 | <a name="mixins"></a> |
268 | 268 | ### Mixins |
|
291 | 291 |
|
292 | 292 | 当遇到以上情况的时候,你也许是这样写 CSS 的: |
293 | 293 |
|
294 | | -* 与 HTML 强耦合的(也是脆弱的) *—或者—* |
295 | | -* 过于具体 (强大) *—或者—* |
| 294 | +* 与 HTML 强耦合的(也是脆弱的)*—或者—* |
| 295 | +* 过于具体(强大)*—或者—* |
296 | 296 | * 没有重用 |
297 | 297 |
|
298 | 298 |
|
299 | | -再说一遍: **不要嵌套 ID 选择器!** |
| 299 | +再说一遍: **永远不要嵌套 ID 选择器!** |
300 | 300 |
|
301 | | -首先,如果你坚持要使用 ID 选择器(其实你真的不应该尝试这么做),那就不应该嵌套它们。如果你发现你正要这么做,你需要重新检查你的标签,或者指明为什么需要这样具体的特征。如果你正打算写出格式良好的 HTML 和 CSS,你是**不**应该这样做的。 |
| 301 | +如果你始终坚持要使用 ID 选择器(劝你三思),那也不应该嵌套它们。如果你正打算这么做,你需要先重新检查你的标签,或者指明原因。如果你想要写出风格良好的 HTML 和 CSS,你是**不**应该这样做的。 |
0 commit comments