Airbnb CSS / Sass编码规范

[NoName4Me]

Airbnb CSS / Sass编码规范

这可能是最合理的编写CSS和Sass代码的方式了

译自：https://github.com/airbnb/css

目录

1. 术语
   • 规则声明
   • 选择器
   • 属性
2. CSS
   • 格式化
   • 注释
   • OOCSS和BEM
   • ID选择器
   • JavaScript钩子
   • Border
3. Sass
   • 语法
   • 属性顺序
   • 变量
   • Mixins
   • 扩展指令
   • 嵌套选择器

术语

规则声明

“规则声明”指的是赋予某个选择器（或一组选择器）一组属性。例如：

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

选择器

在规则声明里，“选择器”决定了其定下的属性会用来设置DOM树中的哪一个（或多个）元素。选择器可以匹配HTML元素、元素的class、ID以及元素的其它属性，下面是选择器示例：

.my-element-class {
  /* ... */
}

[aria-hidden] {
  /* ... */
}

属性

属性是用来给被选中的元素定义样式规则的，它是键-值对，一个规则声明可以包含一个或多个属性声明，例如：

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

⬆ 返回目录

CSS

格式化

• 使用软制表符（2个空格）来缩进
• 类名使用-而不是驼峰方式
  • 如果你使用BEM，可以使用下划线和PascalCasing（查看下方OOCSS和BEM）
• 不要使用ID选择器
• 如果规则声明中使用了多个选择器，每个选择器占据一行
• 在规则声明的左{前空格
• 属性的键值对的:之后空格，而不是之前
• 规则声明的右}单独占一行
• 规则声明之间空一行

糟糕的

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

良好的

.avatar {
  border-radius: 50%;
  border: 2px solid white;
}

.one,
.selector,
.per-line {
  // ...
}

注释

• 优先行注释（在Sass语法中使用//），而不是块注释
• 注释独占一行，而不是在行末尾注释
• 为无法自明的代码写上详细的注释，比如
  • 为什么使用z-index
  • 兼容性以及某个特定浏览器的hacks

OOCSS和BEM

我们推荐组合OOCSS和BEM，理由如下：

• 这样有助于建立HTML和CSS之间清晰、严格的关系
• 有助于创建可复用、可组装的组件
• 可以减少嵌套层级和降低特殊性（译者注：CSS样式的优先级）
• 有助于建立可扩展的样式

OOCSS，是“Object Oriented CSS”（面向对象CSS），是一种编写CSS的方式，它鼓励你将样式想象成一个“对象”的集合，这种可复用的、可重复的代码片段就可以在整个网站中独立使用。

参考：

• Nicole Sullivan's OOCSS wiki
• Smashing Magazine's Introduction to OOCSS

BEM，“Block-Element-Modifier”（块元素修饰器）的缩写，是HTML和CSS中类的 命名约定。最初由Yandex发明，考虑了大型代码和扩展性问题，可以作为实施OOCSS的指导方案。

参考：

• CSS Trick's BEM 101
• Harry Roberts' introduction to BEM

我们推荐一个使用PascalCased“块”的BEM变体，当与组件（如：React）一起使用时很有用。下划线和短划线仍然用于修饰符和子元素。

示例

// ListingCard.jsx
function ListingCard() {
  return (
    <article class="ListingCard ListingCard--featured">

      <h1 class="ListingCard__title">Adorable 2BR in the sunny Mission</h1>

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

    </article>
  );
}

/* ListingCard.css */
.ListingCard { }
.ListingCard--featured { }
.ListingCard__title { }
.ListingCard__content { }

• .ListingCard是“块”，代表更高级别的组件。
• .ListingCard__title是“元素”，代表.ListingCard的后代，它组成了块。
• .ListingCard--featured是“修饰器”，代表块.ListingCard的不同状态或变化。

ID选择器

尽管在CSS里可以使用ID来选中一个元素，但是它很反模式。ID选择器会给你的规则声明引入不必要的高级别特殊性（specificity），而且它们是无法复用的。

想了解更多这个主题，可以阅读CSS Wizardry's article中关于特殊性（specificity）的处理。

JavaScript钩子

避免把同一个类绑定在CSS和JS代码中，如果这么做了，那开发者在重构代码时，除了要浪费时间去交叉寻找每一个要修改的类，甚至可能会因为担心影响功能而不敢轻易做修改。

我们推荐创建专为JS绑定而使用的类，以.js-作为前缀：

<button class="btn btn-primary js-request-to-book">Request to Book</button>

边框

使用0而不是none来指明某个样式没有边框。

译者注：两者并没有优劣，只是个人喜好或团队统一问题。

糟糕的

.foo {
  border: none;
}

良好的

.foo {
  border: 0;
}

⬆返回目录

Sass

语法

• 使用.scss语法，而不是原生的.sass语法
• 使用下面的顺序组织常规CSS和@include声明

属性声明顺序

1. 属性声明

   列出非@include或嵌套选择器的所有标准属性声明

   .btn-green {
     background: green;
     font-weight: bold;
     // ...
   }

2. @include声明

   @include放在最后读起来会比较容易。

   .btn-green {
     background: green;
     font-weight: bold;
     @include transition(background 0.5s ease);
     // ...
   }

3. 嵌套选择器

   嵌套选择器，如果必要的话，放在最后面，规则声明和嵌套选择器之间空行，相邻的嵌套选择器之间也是。将上述规则也用在嵌套的选择器上。

   .btn {
     background: green;
     font-weight: bold;
     @include transition(background 0.5s ease);
   
     .icon {
       margin-right: 10px;
     }
   }

变量

使用短划线分割（比如$my-variable），而不是驼峰或snake_cased（译者注：下划线）。如果变量是只用于一个文件内，那么变量名里加一个下划线前缀（比如$_my-variable）是可以接受的。

Mixins

Mixins可以用来让你的代码遵循DRY原则（Don't Repeat Yourself），可以让代码更清晰、抽象复杂度（类似于封装良好命名的函数）。Mixins可以不接受参数，但是需要注意，如果你不压缩payload（比如gzip，译者注：这里可能说的是打包编译时的配置），最终的样式文件可能会有不必要的重复代码。

扩展指令

@extend应该被避免，它不够直观而且还有潜在风险，尤其当与嵌套选择器一起使用时。及时扩展最顶层的选择器也可能引入问题，如果选择器的顺序可以改变的话（比如在不同的文件中，而且加载顺序有变化）。@extend的优点，gzip都可以覆盖到，而且你可以配合使用minxins来DRY你的代码。

嵌套选择器

选择器嵌套不要超过三层！

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

如果你的选择器嵌套的很深，那么你很可能在这样编写CSS代码：

• 过度的耦合在HTML上（脆弱） —或—
• 过于具体（强大）—或—
• 不可复用

再次强调：不要嵌套ID选择器！

如果你一定要使用ID选择器（当然还是建议你最好不要用），它们都不应该被嵌套。如果你此时正在这样做，那么你可能需要重新审视一下你的代码，或者搞清楚为什么需要这么高优先级（的选择器）。如果你编写了架构良好的HTML和CSS，你可能从来都不需要使用ID选择器甚至嵌套它。

⬆返回目录

[NoName4Me]

http://getbem.com/