Skip to content

Commit f521ec4

Browse files
committed
Update README.md
1 parent 0ae3ce6 commit f521ec4

File tree

1 file changed

+12
-12
lines changed

1 file changed

+12
-12
lines changed

README.md

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
<a name="rule-declaration"></a>
3232
### 规则声明
3333

34-
我们把一个(或一组)选择器与其伴随的属性集合称之为“规则声明”。举个例子:
34+
我们把一个(或一组)选择器和一组属性称之为 “规则声明”。举个例子:
3535

3636
```css
3737
.listing {
@@ -43,7 +43,7 @@
4343
<a name="selectors"></a>
4444
### 选择器
4545

46-
在规则声明中,“选择器”部分将决定样式属性会被应用到 DOM 树中哪些元素。选择器可以匹配 HTML 元素,也可以匹配一个元素的类名、ID, 或者元素拥有的属性。以下是选择器的例子:
46+
在规则声明中,“选择器” 部分将决定样式属性会被应用到 DOM 树中哪些元素。选择器可以匹配 HTML 元素,也可以匹配一个元素的类名、ID, 或者元素拥有的属性。以下是选择器的例子:
4747

4848
```css
4949
.my-element-class {
@@ -117,27 +117,27 @@
117117
* 建议使用行注释 (在 Sass 中是 `//`) 代替块注释。
118118
* 建议在当行给代码写注释。避免行末注释。
119119
* 为代码作详细的注释,而不是写自述文档,比如:
120-
- z-index 的用处
120+
- z-index 的作用
121121
- 兼容性处理或者针对特定浏览器的 hack
122122

123123
<a name="oocss-and-bem"></a>
124124
### OOCSS 和 BEM
125125

126-
出于以下原因,我们鼓励使用 OOCSS 和 BEM 的组合
126+
出于以下原因,我们鼓励使用 OOCSS 和 BEM 的某种组合
127127

128128
* 可以帮助我们理清 CSS 和 HTML 之间清晰且严谨的关系。
129129
* 可以帮助我们创建出可重用、易装配的组件。
130130
* 可以减少嵌套,降低特定性。
131131
* 可以帮助我们创建出可扩展的样式表。
132132

133-
**OOCSS**,也就是 “Object Oriented CSS(面向对象的CSS)”,是一种写 CSS 的方法,其思想就是鼓励你把样式表看作“对象”的集合:可重用性、可重复性的代码段让你可以在整个网站中多次使用。
133+
**OOCSS**,也就是 “Object Oriented CSS(面向对象的CSS)”,是一种写 CSS 的方法,其思想就是鼓励你把样式表看作“对象”的集合:创建可重用性、可重复性的代码段让你可以在整个网站中多次使用。
134134

135135
参考资料:
136136

137137
* Nicole Sullivan 的 [OOCSS wiki](https://github.com/stubbornella/oocss/wiki)
138138
* Smashing Magazine 的 [Introduction to OOCSS](http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/)
139139

140-
**BEM**,也就是 “Block-Element-Modifier”,是一种用于 HTML 和 CSS 类名的_命名约定_。BEM 最初是由 Yandex 提出的,要知道他们拥有巨大的代码库和可伸缩性,并且可以作为一套贯彻 OOCSS 的参考指导规范。
140+
**BEM**,也就是 “Block-Element-Modifier”,是一种用于 HTML 和 CSS 类名的_命名约定_。BEM 最初是由 Yandex 提出的,要知道他们拥有巨大的代码库和可伸缩性,BEM 就是为此而生的,并且可以作为一套遵循 OOCSS 的参考指导规范。
141141

142142
* CSS Trick 的 [BEM 101](https://css-tricks.com/bem-101/)
143143
* Harry Roberts 的 [introduction to BEM](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)
@@ -177,7 +177,7 @@
177177
<a name="javascript-hooks"></a>
178178
### JavaScript 钩子
179179

180-
避免在 CSS 和 JavaScript 中绑定相同的类。否则通常会导致以下两种后果:起码在重构的时候,开发者不得不把时间花费在两边对照每个要改变的类;更糟糕的是,开发者甚至会因为害怕破坏功能而不敢作出更改
180+
避免在 CSS 和 JavaScript 中绑定相同的类。否则通常会导致以下两种后果:在重构的时候,开发者轻则浪费时间在对照查找每个要改变的类,重则因为害怕破坏功能而不敢作出更改
181181

182182
我们推荐在创建用于特定 JavaScript 的类名时,添加 `.js-` 前缀:
183183

@@ -262,7 +262,7 @@
262262
<a name="variables"></a>
263263
### 变量
264264

265-
变量名应使用破折号 (例如 `$my-variable`) 代替 camelCased 和 snake_cased 风格。对于仅用在当前文件的变量,可以在变量名之前添加下划线前缀 (例如 `$_my-variable`)
265+
变量名应使用破折号例如 `$my-variable`代替 camelCased 和 snake_cased 风格。对于仅用在当前文件的变量,可以在变量名之前添加下划线前缀 例如 `$_my-variable`
266266

267267
<a name="mixins"></a>
268268
### Mixins
@@ -291,11 +291,11 @@
291291

292292
当遇到以上情况的时候,你也许是这样写 CSS 的:
293293

294-
*HTML 强耦合的(也是脆弱的) *—或者—*
295-
* 过于具体 (强大) *—或者—*
294+
*HTML 强耦合的也是脆弱的*—或者—*
295+
* 过于具体(强大)*—或者—*
296296
* 没有重用
297297

298298

299-
再说一遍: **不要嵌套 ID 选择器!**
299+
再说一遍: **永远不要嵌套 ID 选择器!**
300300

301-
首先,如果你坚持要使用 ID 选择器(其实你真的不应该尝试这么做),那就不应该嵌套它们。如果你发现你正要这么做,你需要重新检查你的标签,或者指明为什么需要这样具体的特征。如果你正打算写出格式良好的 HTML 和 CSS,你是****应该这样做的。
301+
如果你始终坚持要使用 ID 选择器(劝你三思),那也不应该嵌套它们。如果你正打算这么做,你需要先重新检查你的标签,或者指明原因。如果你想要写出风格良好的 HTML 和 CSS,你是****应该这样做的。

0 commit comments

Comments
 (0)