CSS設計模式：OOCSS 和 SMACSS

真心以爲寫出 CSS 並不難，可是要寫出可被維護的 CSS 比其餘程式語言都還難。所幸已經有許多大師級的人物，提出許多設計模式和思惟，藉由站在巨人的肩膀上可讓事情事半功倍。這篇文章就來講說 OOCSS、SMACSS 和撰寫 CSS 時應該注意的規範。

（本文的例子用的是 SCSS 語法）

OOCSS

OOCSS 不是什麼新技術，只是一種撰寫 CSS 的設計模式，或者能夠說是一種「道德規範」，大體上我以爲重點只有兩個：

• 減小對 HTML 結構的依賴
• 增長 CSS class 重複性的使用

減小對 HTML 結構的依賴

<nav class="nav--main">
  <ul>
    <li><a>.........</a></li>
    <li><a>.........</a></li>
    <li><a>.........</a></li>
  </ul>
</nav>

通常的導航欄寫法，結構應該會像上面的 HTML 範例同樣，若是要對那些 <a> 標籤訂義樣式，CSS 的寫法可能寫成 .nav--main ul li a {}，這種寫法先無論效能上的問題，能夠看出來過分地依賴元素標籤的結構，有可能以後 HTML 結構改變，這個 CSS 就必須跟著重構，形成維護上多餘的成本。

若從這個例子來考量，原則上 <a> 都必定會接在 <li> 標籤的後面，一個 <li> 只會有一個 <a>，一般不會獨立存在，那就能夠寫成 .nav--main a {}，會是比較好的寫法，甚至是直接給 <a> 加上 class nav--main_item。後者是 OOCSS 所提倡的用法。

這樣的寫法，一來效能理論上比較好（我沒辦法驗證），二來層次比較單純。

增長 CSS class 的重複使用

在 OOCSS 的觀念中，強調重複使用 class，而應該避免使用 id 做爲 CSS 的選擇器。這種想法就是像
OOP
儘可能抽離重複的程式碼，例如如下這個例子，這是兩種按鈕的 CSS 樣式屬性：

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

上面的 CSS 將兩種不一樣樣式的 button，抽離出重複的部份，而且定義在同個 class
上。所以，要使用這樣的樣式，HTML 的寫法可能長這個樣子：

<a class="button button-default">
<a class="button button-primary">

先用 button 宣告此爲一個按鈕的樣式，再用 button-default 或 button-primary 做爲按鈕底色的區別。這麼作能夠維護成本變得比較低，例如：想要改網站上全部按鈕的大小，就只要修改 .button 的 padding 而已。

SMACSS

我對 SMACSS 的理解還不是很深刻，或許把 Scalable and Modular Architecture for CSS 看完後會有更深一曾的理解。目前對 SMACSS 的概念僅限於它對 CSS 不一樣的業務邏輯所作的劃分方式：

但我認爲本來的設計不是很穩當，所以我本身作了一些改良：

Base

Base 就是設定標籤元素的預設值，例如瀏覽器的 reset 能夠寫在這裏，若是用的是 Compass，只要 @include global-reset 便可。這裏只會對標籤元素自己作設定，不會出現任何 class 或
id，可是能夠有屬性選擇器或是僞類：

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

Layout

Layout 是指整個網站的「大架構」的外觀，而非 .button 這種小元件的 class。網站一般會有一些主要的大區塊，多是 header 或 footer，Layout 就是用來定義這些「大架構」的 CSS。若是有作 Responsive Web Design 或是用 Grid System，也是把規則寫在 Layout 這裏。

如下這是個範例：

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

一般只有一個選擇器，一個 id、或一個 class。

Module

本來的 SMACSS 對 Module 的設計我以爲不是很好，因此我硬是將 Module
拆分出一個 Partial。

這裏的 Module 顧名思義，就是能夠在其餘地方被重複使用，若是要找更明確的例子，我想就像 Twitter Bootstrap 的 Components
同樣，或者像前面 OOCSS 所舉例的 .button 這種會被重複使用的元件模組。

模組不須要用任何的 prefix，由於 Module 就是設計來能夠重複應用在不一樣的 page 上。

Partial

Partial 跟 Latout 不一樣，也跟 Module 不一樣，他比 Layout 的範圍小，多是
header 底下的某個子元素。他不像 Module，他是特定單一領域下特別的設定。

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

一般會將 Partial 的名稱加在子 class 做爲 prefix，例如 .nav--main 底下的
.nav--main_item。至於爲何要用這麼奇怪的命名方式？這等等在 CSS 規範部分會說明介紹。

State

State 負責定義元素不一樣的狀態下，所呈現的樣式。可是並不是指一個元素的 :hover 或 :active 下的狀態。舉例來講，一個導航欄分頁，目前所在頁面的分頁須要加上 .active
的屬性表示目前位置是在這個分頁，HTML 會長這樣：

<nav class="nav--main">
  <ul>
    <li><a>.........</a></li>
    <li class="active"><a>.........</a></li>
    <li><a>.........</a></li>
  </ul>
</nav>

所以能夠替 .nav--main 增長 .active 這樣的子 class：

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

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

Theme

Theme 是畫面上全部「主視覺」的定義，例如 border-color、background-image 或是 font-family 等相關的 Typography 設定。爲何說是「主視覺」？由於有些元件模組仍然是留在 Module 去定義，Theme 就像 Layout 同樣負責「大架構」上的視覺樣式。

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

CSS 規範

這裏整理的是我以爲必定要知道的，其餘還有不少規範能夠轉到文末的參考資源連結，那篇文章有介紹更多的細節。

BEM

BEM 即 Block、Element、Modifier 的縮寫，這是一種 class 的命名技巧。若是整個 project 只有本身一我的作，那固然是不太可能出現 class 重複的問題，可是若是同時多個 F2E 一塊兒寫同個部分的 CSS，就很容易出現共用 class 的問題，所以有了 BEM 這樣的命名技巧。

將 Block 區塊做爲起始開頭，像前面 SMACSS 介紹的 Partial 就能夠拿來做爲 Block 的 prefix 名稱；Element 則是 Block 下的元素；Modifier 則是這個元素的屬性。

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

這裏有個範例：

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

Javascript Hook

透過 CSS class 來做爲 Javascript 選取 DOM 節點的方式，就是 Javascript Hook。用 jQuery 能夠經常看到這樣的寫法：$('.nav--main a')，但是當 CSS 跟 Javascript 攪在一塊兒反而形成兩邊維護上的不便，當改了 CSS 時 Javascript 也要跟著改。

因此用 HTML 的屬性去選取 DOM 節點會更好，若是非要用 CSS 的 class 那也能夠多寫一個 js- 的 prefix，以表示這個節點有被 Javascript 使用，例如：

<li class="nav--main__item  js-nav--main__item"><a>.........</a></li>
<li class="nav--main__item  js-nav--main__item"><a>.........</a></li>
<li class="nav--main__item  js-nav--main__item"><a>.........</a></li>

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

合理的選擇器

class 無所謂是否語意化的問題；你應該關注它們是否合理，不要刻意強調 class
名稱要符合語意，而要注重使用的合理性與將來性。

有時候爲了表示更明確，在使用 CSS 的選擇器時，要表示某的 class 是搭配某個標籤元素使用，會寫成這樣：

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

可是上面這個寫法效能不是很好，一樣的目的但能夠減小多餘的修飾，試試改用下面這種寫法，將標籤名稱用註解標示起來，維護上有相同的效果，可是瀏覽器處理的速度會比較快：

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

參考資源

• 撰寫可管理、可維護的 CSS 高階技巧

via chh