CSS规则集

在这里，极有可能颠覆每个人对书写 CSS 规则集的认知（根据众多规范整理而成，包括CSS Guidelines）：

• 相关联的选择器写在同一行；不相关联选择器分行书写；
• 最后一个选择器和左开大括号({)中间书写一个空格；
• 每个声明单独一行；
• 冒号(:)后添加空格；
• 所有声明的尾部都添加一个分号 (;)；
• 右闭大括号(})单独一行；
• 右闭大括号(})添加空行。

示例:

// Yep
.foo, .foo-bar,
.baz {
  display: block;
  overflow: hidden;
  margin: 0 auto;
}

// Nope
.foo,
.foo-bar, .baz {
    display: block;
    overflow: hidden;
    margin: 0 auto }

添加与 CSS 相关的规范时，我们需要注意：

• 本地变量在其他任何变量之前声明，并和其他声明用空行分隔开；
• 不需 @content 的混合宏在放在其他声明之前；
• 嵌套选择器在新行声明；
• 需要 @content 的混合宏在嵌套选择器后声明；
• 右闭大括号(})上一行无需空行；

示例:

.foo, .foo-bar,
.baz {
  $length: 42em;

  @include ellipsis;
  @include size($length);
  display: block;
  overflow: hidden;
  margin: 0 auto;

  &:hover {
    color: red;
  }

  @include respond-to('small') {
    overflow: visible;
  }
}

扩展阅读

• Anatomy of a Ruleset