CSS規(guī)則集

在這里，極有可能顛覆每個(gè)人對(duì)書寫 CSS 規(guī)則集的認(rèn)知（根據(jù)眾多規(guī)范整理而成，包括CSS Guidelines）：

• 相關(guān)聯(lián)的選擇器寫在同一行；不相關(guān)聯(lián)選擇器分行書寫；
• 最后一個(gè)選擇器和左開大括號(hào)({)中間書寫一個(gè)空格；
• 每個(gè)聲明單獨(dú)一行；
• 冒號(hào)(:)后添加空格；
• 所有聲明的尾部都添加一個(gè)分號(hào) (;)；
• 右閉大括號(hào)(})單獨(dú)一行；
• 右閉大括號(hào)(})添加空行。

示例:

// 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 相關(guān)的規(guī)范時(shí)，我們需要注意：

• 本地變量在其他任何變量之前聲明，并和其他聲明用空行分隔開；
• 不需?@content?的混合宏在放在其他聲明之前；
• 嵌套選擇器在新行聲明；
• 需要?@content?的混合宏在嵌套選擇器后聲明；
• 右閉大括號(hào)(})上一行無需空行；

示例:

.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;
  }
}

擴(kuò)展閱讀

• Anatomy of a Ruleset