.button {
  display: inline-block;
  padding: 6px 12px;
  color: hsla(0, 100%, 100%, 1);
  &.button-default { background: hsla(180, 1%, 28%, 1); }
  &.button-primary { background: hsla(208, 56%, 53%, 1); }
}

html {}
input[type=text] {}
a:hover {}

#header { margin: 30px 0; }
#articles-wrapper { ......; }
.sidebar {
  &.sidebar--right { ......; }
  &.sidebar-left { ......; }
}

.nav--main {
  a { ......; }
}

因此可以替 .nav--main 增加 .active 這樣的子 class：

.nav--main {
  // others…;
  .active {
    background: darken($background-color, 16%);
  }
}

有時候為了讓閱讀更貼近語義，會用比較友善的命名方式，以此段的范例來說，.is-active 就比 .active 來得好讀。

Theme 是畫面上所有「主視覺」的定義，例如 border-color、background-image 或是 font-family 等相關(guān)的 Typography 設(shè)定。為什么說是「主視覺」？因為有些元件模組仍然是留在 Module 去定義，Theme 就像 Layout 一樣負(fù)責(zé)「大架構(gòu)」上的視覺樣式。

編者注 感謝 Only1Word 指出，theme 在 SMACSS 中更類似皮膚。

這里整理的是我覺得一定要知道的，其他還有很多規(guī)范可以轉(zhuǎn)到文末的參考資源連結(jié)，那篇文章有介紹更多的細(xì)節(jié)。

BEM 即 Block、Element、Modifier 的縮寫，這是一種 class 的命名技巧。如果整個 project 只有自己一個人做，那當(dāng)然是不太可能出現(xiàn) class 重復(fù)的問題，但是如果同時多個 F2E 一起寫同個部分的 CSS，就很容易出現(xiàn)共用 class 的問題，因此有了 BEM 這樣的命名技巧。

將 Block 區(qū)塊作為起始開頭，像前面 SMACSS 介紹的 Partial 就可以拿來作為 Block 的 prefix 名稱；Element 則是 Block 下的元素；Modifier 則是這個元素的屬性。

不同 Block 和 Element 用 __ 兩個底線區(qū)隔開來，不同的 Modifier 則用 -- 兩個 dash 區(qū)隔。至于 - 一個 dash 則表示這個 class 不依賴任何 Block 或 Element，是個獨(dú)立的存在，例如：.page-container 或 .article-wrapper。

這里有個范例：

.sidebar {
  .sidebar--left__section {
    .sidebar--left__section--header {}
    .sidebar--left__section--footer {}
  }
}

透過 CSS class 來作為 Javascript 選取 DOM 節(jié)點的方式，就是 Javascript Hook。用 jQuery 可以常常看到這樣的寫法：$(".nav--main a")，可是當(dāng) CSS 跟 Javascript 攪在一起反而造成兩邊維護(hù)上的不便，當(dāng)改了 CSS 時 Javascript 也要跟著改。

所以用 HTML 的屬性去選取 DOM 節(jié)點會更好，如果非要用 CSS 的 class 那也可以多寫一個 js- 的 prefix，以表示這個節(jié)點有被 Javascript 使用，例如：

.........
.........
.........

PS. HTML 里兩個 class 之間用兩個空格，會比一個空格看起來好閱讀。

  
class 無所謂是否語意化的問題；你應(yīng)該關(guān)注它們是否合理，不要刻意強(qiáng)調(diào) class

  名稱要符合語意，而要注重使用的合理性與未來性。

有時候為了表示更明確，在使用 CSS 的選擇器時，要表示某的 class 是搭配某個標(biāo)簽元素使用，會寫成這樣：

ol.breadcrumb{}
p.intro{}
ul.image-thumbs{}

但是上面這個寫法效能不是很好，同樣的目的但可以減少多余的修飾，試試改用下面這種寫法，將標(biāo)簽名稱用注解標(biāo)示起來，維護(hù)上有相同的效果，但是瀏覽器處理的速度會比較快：

/*ol*/.breadcrumb{}
/*p*/.intro{}
/*ul*/.image-thumbs{}

撰寫可管理、可維護(hù)的 CSS 高階技巧

via chh