Airbnb | Css规范

Airbnb css/sass编码规范

1 格式

• 使用软制表符（2个空格）进行缩进。
• 在类名中，最好使用破折号而不是驼峰式铸造。
• 如果使用的是BEM，则可以使用下划线和PascalCasing（请参见下面的OOCSS和BEM）。
• 不要使用ID选择器。
• 在规则声明中使用多个选择器时，请为每个选择器分配自己的行。
• 在规则声明的左大括号{之前放置一个空格。
• 在属性中，在:字符之后（但不能在字符之前）放置一个空格。 将}规则声明的右花括号放在新行上。
• 在规则声明之间放置空白行。

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 {
  // ...
}
           

2. 注释

建议使用行注释 (在 Sass 中是 //) 代替块注释。

建议注释独占一行。避免行末注释。

3. OOCSS 和 BEM

鼓励使用 OOCSS 和 BEM 的某种组合：

• 可以帮助我们理清 CSS 和 HTML 之间清晰且严谨的关系。

• 可以帮助我们创建出可重用、易装配的组件。

• 可以减少嵌套，降低特定性。

• 可以帮助我们创建出可扩展的样式表。

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

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

示例:

<article class="listing-card listing-card--featured">

  <h1 class="listing-card__title">Adorable 2BR in the sunny Mission</h1>

  <div class="listing-card__content">
    <p>Vestibulum id ligula porta felis euismod semper.</p>
  </div>

</article>
           

.listing-card { }

.listing-card--featured { }

.listing-card__title { }

.listing-card__content { }
           

• .listing-card 是一个块（block），表示高层次的组件。

• .listing-card__title 是一个元素（element），它属于 .listing-card 的一部分，因此块是由元素组成的。

• .listing-card–featured 是一个修饰符（modifier），表示这个块与 .listing-card 有着不同的状态或者变化。

4 尽量不要使用ID 选择器！！！

在 CSS 中，虽然可以通过 ID 选择元素，但大家通常都会把这种方式列为反面教材。ID 选择器给你的规则声明带来了不必要的高优先级，而且 ID 选择器是不可重用的。

5 推荐使用Scss语法

使用 .scss 的语法，不使用 .sass 原本的语法。

6 变量

变量名应使用破折号（例如 my−variable）代替camelCased和snakecased风格。对于仅用在当前文件的变量，可以在变量名之前添加下划线前缀（例如_my-variable）。

7 Mixins

为了让代码遵循 DRY 原则（Don’t Repeat Yourself）、增强清晰性或抽象化复杂性，应该使用 mixin，这与那些命名良好的函数的作用是异曲同工的。虽然 mixin 可以不接收参数，但要注意，假如不压缩负载（比如通过 gzip），这样会导致最终的样式包含不必要的代码重复。

8 扩展指令

应避免使用 @extend 指令，因为它并不直观，而且具有潜在风险，特别是用在嵌套选择器的时候。即便是在顶层占位符选择器使用扩展，如果选择器的顺序最终会改变，也可能会导致问题。（比如，如果它们存在于其他文件，而加载顺序发生了变化）。其实，使用 @extend 所获得的大部分优化效果，gzip 压缩已经帮助你做到了，因此你只需要通过 mixin 让样式表更符合 DRY 原则就足够了。

9 嵌套选择器

请不要让嵌套选择器的深度超过 3 层！

.page-container {
  .content {
    .profile {
      // STOP!
    }
  }
}
           

当遇到以上情况的时候，你也许是这样写 CSS 的：

• 与 HTML 强耦合的（也是脆弱的）

• 过于具体（强大）

• 没有重用