CSS SMACSS簡單介紹

SMACSS的全程是Scalable and Modular Architecture for CSS。

翻譯成中文也就是可擴充套件和模組化的CSS架構。

SMACSS將樣式分成5種型別：

（1）.Base:

基礎樣式表，定義了基本的樣式。

平時寫CSS比如reset.css就是屬於基礎樣式表，另外我認為清除浮動，一些動畫也可以歸類為基礎樣式。

（2）.Layout:

佈局樣式，用於實現網頁的基本佈局，搭起整個網頁的基本骨架。

（3）.Module:

網頁中不同的區域有這個不同的功能，這些功能是相對獨立的，我們可以稱其為模組。模組是獨立的，可重用的元件，它們不依賴於佈局元件，可以安全的刪除修改而不影響其他模組。

（4）.State:

狀態樣式，通常和js一起配合使用，表示某個元件或功能不同的狀態，比如選單選中狀態，按鈕不可用狀態等。

關於狀態樣式，我個人覺得要分情況進行討論：

1).不同元件的同一狀態的樣式是一樣的，比如頭部的導航選單的選中狀態樣式和側欄的選單選中狀態樣式是一樣的，我認為這部分狀態樣式可以歸類為State

2).不同元件的統一狀態的樣式是不一樣的，即兩個地方的選單雖然都是選中狀態，但是他們卻又不同的選中樣式，這部分樣式不應該被認為是State型別，而是應該放在其元件對應的Module中。

（5）.Theme：

皮膚樣式，對於可更換皮膚的站點來說，這個是很有必要的，分離了結構和皮膚，根據不同的皮膚應用不同的樣式檔案。