用SMACSS規范來編寫CSS

 　　這是一個相對繁雜的CSS理論，分為Base、Layout、Module、Status和Theme共五個部分。不過它的核心思想仍然和OOCSS類似，鼓勵使用class。

　　1. Base 基本屬性

　　基礎屬性很容易理解，就是最基本的東西，很多樣式簡單的網站都采用一個簡單的二級CSS文件模式，一個base.css通用於所有頁面，而每個頁面有一個特定的CSS文件，我想這就是Base的雛形。要說具體是什麼，比如reset文件，再比如放置clearfix或BFC的一些類似工具集的文件。

　　其實最終會發現，在Base中的CSS屬性將會是幾乎全站都要用到的屬性，但我不想這麼描述Base，因為這會誤導人。大多數情況下，在一個網站建立之初也只會有幾個簡單的頁面，於是這幾個頁面都要用到的屬性就變成了通用屬性，但並不是這麼簡單的。隨著網站規模的擴大，需求的增加，設計師們靈感的迸發，所謂的通用和統一也在發生著潛移默化。所以在編寫Base時，應該遵循的基准是，哪些樣式是你做下一個網站時也會想用的，哪些樣式即使設計改變了也只需要改變一些數值和顏色，哪些樣式是一些基本原則;而不應該將目前大部分頁面都在使用的樣式放在Base中，還是那個道理，它們也許僅僅是恰好相同，而非邏輯一致。

　　2. Layout 布局

　　布局是一個網站的基本，無論是左右還是居中，甚至其他什麼布局，要實現頁面的基本浏覽功能，布局必不可少。SMACSS將這一功能單獨提出也是非常正確的，另外還約定了一個前綴l-/layout-來標識布局的class。舉個最普遍的例子。

　　代碼如下:

　　.l-header {}

　　.l-brand {}

　　.l-navigator {}

　　.l-container {}

　　.l-sidebar {}

　　.l-content {}

　　.l-footer {}

　　這就是一個簡單的左右布局，導航和Logo中規中矩在最頂部。

　　3. Module 模塊

　　模塊是SMACSS最基本的思想，同時也是大部分CSS理論的基本，將樣式模塊化就能達到復用和可維護的目的，但是SMACSS提出了更具體的模塊化方案。首先表象上來看，SMACSS中的模塊應該擁有一個名字，並且為其class名，而模塊其他class皆以為前綴。比如：

　　CSS Code復制內容到剪貼板

　　.product {}

　　.product-title {}

　　.product-image {}

　　.product-border {}

　　.product-shadow {}

　　可以看到例子中product是一個模塊，title和image是包含在模塊內的組件，可用可不用;border和shadow是類似OOCSS的附加class用來改變模塊本身。總之，在模塊內可以使用其名稱做前綴任意組織模塊結構，但目前是讓其變得更易用，提高可擴展性和靈活度，如果僅僅為了某些功能而特意寫一些class就有點有形無實的感覺了。

　　4. State 狀態

　　狀態經常和JavaScript放在一起使用，它是一種用來標識頁面狀態的class，無論是為用戶標識還是用程序標識。還是一個常見的例子，馬上就明白。active經常用來表示當前的tab，或者當前選中的目標，這就是一種狀態，無論是樣式還是程序都需要知道它。

　　SMACSS仍然有一個對應的前綴用於標示狀態class，is-是一個合適的詞，指明某一元素是什麼狀態。

　　5. Theme 主題

　　主題就是皮膚，和OOCSS的分離皮膚與結構不謀而合。更重要的是對於可更換皮膚的站點來說，這樣的分離是非常必要的，只需要更換加載的theme文件即可將皮膚更換。

　　總的來說，SMACSS是一個較為注意細節與實現的CSS理論，非常適合初涉CSS的人，它可以讓你的CSS跑在軌道上而不至於脫軌。其思想也與OOCSS有很多相通之處，如果沒有適合的方案，我建議新手可以適當的融入OOCSS的思想而使用SMACSS的結構，這樣寫出來的網站樣式至少不會馬上陷入泥沼。