六種組織CSS的方式

Ben Frain曾經說過，寫css代碼很容易，可是擴展和維護卻很難。本文就介紹了一套方案來解決這個問題。

OOCSS

OOCSS 意爲面向對象的CSS。這種方法有兩種主要 觀點:

• 結構與設計分離
• 容器和內容分離

使用這套結構，開發者能獲得能夠在不一樣地方使用的通常類。

在這一步，會存在兩點（一般就好和壞）：

• 好: 經過重複利用減小代碼量 (DRY原則)。
• 壞: 組合使用。當你改變一個特定元素的樣式, 你須要改變的頗有可能不只僅是CSS（由於大可能是類都是公共的），並且還會添加新的類。

此外，這種OOCSS的方法自己並無明確的規則，而是抽象的建議，因此這種方法在生產中的結果會有不一樣。

實際結果就是，這種OOCSS的思想啓發了其餘人建立出屬於他們本身更具體的代碼結構。

SMACSS

SMACSS 意爲可擴展、模塊化（Scalable and Modular Architecture）的CSS。這種方法的主要目的是減小代碼量，而且使代碼維護更簡單。

Jonathan Snook將樣式分爲了5個部分:

1. Base rules. 這些是主要的網頁元素樣式 - body, input, button, ul, ol等。在這部分, 咱們主要使用
   HTML標籤和屬性選擇器, 特殊的狀況下使用 - 類 (例如， 你有JavaScript的樣式選擇);
2. Layout rules. 這些是全局元素的樣式，好比<caption> <footer> <sidebar>的尺寸等。Jonathan建議在這些元素中使用id選擇器，由於這些元素在頁面中不會出現超過一次。然而，這篇文章的做者認爲這並非好的作法。(在樣式文件中，無論id何時出現，都會在其它的某個地方形成些麻煩).
3. Modules rules.在單個頁面中，塊會被屢次使用。對於模塊的分類，並不建議使用id和標籤選擇器（分別爲了重複使用和上下文獨立性）。
4. State rules. 在這一部分，規定了模塊的不一樣狀態和網頁基礎，這是惟一可使用關鍵字!Important 的地方。
5. Theme rules. 設計你可能須要更換的樣式。

另外，還建議對屬於某個特定分組的類設定命名空間，併爲JavaScript中使用的類使用單獨的命名空間。

這種方法使得編寫和維護代碼都更加容易，而且吸引了不少開發者。

Atomic CSS

使用Atomic CSS，爲每個可重用的屬性建立一個單獨的類。好比 margin-top: 1px;就能夠建立一個類 mt-1，width: 200px;能夠建立一個w-200。

這種風格容許經過重複聲明來儘量減小代碼，而且改變模塊樣式也相對容易，for example, when changing a technical task.

然而，這種方法也有很大的缺點：

• 類名都是描述性的屬性名，而不是對元素自己的語義化描述，有時會使得開發複雜化。
• 直接在HTML中顯示設置。

由於這些缺點，這種方法遭到了大量批評。可是，這種方法對於大型項目而言，仍是頗有效的。

此外Atomic CSS也被用在不一樣的框架裏來指明矯正元素樣式，還有一些其它方法的展示層。

MCSS

MCSS是多層CSS。這種書寫代碼的風格建議將樣式分爲幾個部分，稱爲層（layers）。

• 底層（Zero layer or foundation）。這層代碼負責重置瀏覽器樣式（好比reset.css 和
  normalize.css）;
• 基礎層（Base layer）包含網站重複使用的元素的樣式：按鈕、文本輸入框等。
• 項目層（Project layer）包含單獨的模塊和一個「上下文」——根據客戶端瀏覽器，查看站點/應用程序的設備，用戶角色等對元素的修改。
• 修飾層（Cosmetic layer）代碼是OOCSS的風格，對元素的外觀作一些小的修改。建議只保留影響元素外觀，但不會破壞網站佈局的樣式（好比顏色和不重要的縮進）。

層級之間的交互層次是很重要的：

• 基礎層（base layer）定義中性樣式，不影響其餘層。
• 基礎層（base layer）的元素只會影響本層的類。
• 項目層（project layer）的元素能影響基礎層和項目層。
• 修飾層（cosmetic layer）是以描述性OOCSS類（「atomic」類）的形式設計的，而且不會影響其餘的CSS代碼，可選擇性的用於標記當中。

AMCSS

AMCSS就是"Attribute Modules for CSS（css的屬性模塊）"。

讓咱們看一個例子:

<div class="button button--large button--blue">Button</div>

這樣一個類的鏈並不簡單，因此讓我經過屬性來組織這些值。

結果以下:

<div button="large blue">Button</div>

爲了不命名衝突，添加命名空間到屬性上是個好主意。而後，咱們的按鈕就變成了下面的樣子：

<div am-button="large blue">Button</div>

若是你使用驗證器檢查代碼，會發現並無am-button這個屬性，因此能夠在屬性名稱前加上data-。

使用一個不爲人知，做爲class屬性的選擇器"~ =" (IE7+)：該選擇器選擇屬性值包含指定單詞的元素，用空格分隔。因此，這種class~="link"的選擇器相似於a.class.button這樣的選擇器。即便專門使用，由於class選擇器也只是該屬性選擇器的特殊狀況。

所以，CSS代碼

.button {...}
.button--large {...}
.button--blue {...}

轉換爲

[am-button] {...}
[am-button~="large"] {...}
[am-button~="blue"] {...}

若是你以爲這樣的代碼不常見，也可使用不那麼激進的AMCSS形式：

<div am-button am-button-large am-button-blue></div>

FUN

FUN 表示選擇器的扁平結構（Flat hierarchy of selectors），功能樣式（Utility styles），命名分割組件（Name-spaced components）。

每一個字母后面都有特定的原則：

• F, flat hierarchy of selectors: 建議使用類來選擇元素，避免無用的串聯，而且不使用id。
• U, utility styles: 鼓勵建立atomic風格的服務來解決典型的拼湊任務，好比 w100表示width:
  100%;，fr表示float: right;
• N, name-spaced components: Ben建議添加命名空間來指定特殊的模塊元素的樣式。這種方法避免了類名的重疊。

一些開發者注意到使用這種原則來書寫和維護代碼是至關方便的；在某種程度上，做者拿出了最好的成果，而且以一種簡潔的方式展現了這項技術。

這種方法對項目和代碼結構還有不小要求，它只創建記錄元素的首選形式和標記使用的方法。可是在小項目中，這些規則足夠建立出足夠高質量的代碼。

總結

正如你所見，這些方法裏並無一個完美的。這些方法中沒有一條絕對的規則——你能夠從開始使用一套方案來建立你本身的東西， 或者從頭開始建立一條新的方法。