译文 GitHub 链接，欢迎各位指正。

翻译自 Airbnb CSS / Sass Styleguide

目录

术语

规则声明

我们把一个（或一组）选择器和一组属性称之为 “规则声明”。举个例子：

.listing { font-size: 18px; line-height: 1.2;}

选择器

在规则声明中，“选择器” 负责选取 DOM 树中的元素，这些元素将被定义的属性所修饰。选择器可以匹配 HTML 元素，也可以匹配一个元素的类名、ID, 或者元素拥有的属性。以下是选择器的例子：

.my-element-class { /* ... */}[aria-hidden] { /* ... */}

属性

最后，属性决定了规则声明里被选择的元素将得到何种样式。属性以键值对形式存在，一个规则声明可以包含一或多个属性定义。以下是属性定义的例子：

/* some selector */ { background: #f1f1f1; color: #333;}

CSS

格式

Bad

.avatar{ border-radius:50%; border:2px solid white; }.no, .nope, .not_good { // ...}#lol-no { // ...}

Good

.avatar { border-radius: 50%; border: 2px solid white;}.one,.selector,.per-line { // ...}

注释

OOCSS 和 BEM

出于以下原因，我们鼓励使用 OOCSS 和 BEM 的某种组合：

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

参考资料：

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

示例

 
Adorable 2BR in the sunny Mission
 
Vestibulum id ligula porta felis euismod semper.