CSS模塊化(三) CSS的組織 千次閱讀

3.CSS的組織正所謂見仁見智，所以如何組織CSS可以有多種角度，例如按功能劃分:將控制字體的CSS集中在font.css文件裏，將控制顏色的CSS集中在color.css，文件裏，將控制布局的CSS放在1ayout.css文件裏;或者按區塊劃分:將頭部的CSS放在head.css裏，底部放在foot.css裏，側邊欄放在sidebar.css.，主體放在main裏。不同角度的組織方法都有自己的道理，也有自己的優點和缺點。
    這裏推薦一種組織CSS的方法:base.css + common.css + page.css。將網站內的所有樣式，按照職能分成三大類:base.css，common.css，page.css。在一般情況下，任何一個網頁的最終表現都是由這三者共同完成的。這三者不是並列結構，而是層疊結構，如圖所示。
 
 

3.1 Base層

    這一層位於三者的最底層，提供css reset功能和粒度最小的通用類—原子類。這一層會被所有頁面引用，是頁面樣式所需依賴的最底層。這一層與具體UI無關，無論何種風格的設計都可以引用它，所以base層要力求精簡和通用。如果將用css控制頁面樣式比喻為建房子，這一層的核心職能是為房子打好地基css reset，並將建房用的磚塊(原子類)准備充足。因為幾乎所有的房子都要打地基，也都需要磚塊，所以basc層具有高度可移植性，不同設計風格的網站可以使用同一個base層。因為這一層的內容很少，所以可以簡單地放在一個文件裏，例如base.css。
base.css層相對穩定，基本上不需要維護。
示例：YUI推薦的 base.css 見文件

3.2 Common層

    這一層位於中間，提供組件級的CSS類。提到組件，就不得不提“模塊化”。“模塊化”可以從樣式和行為兩個層面來考慮，與common層相關的是樣式的模塊化。今天主要講的css模塊化也是放在這一層中。我們可以將頁面內的元素拆分成一小塊一小塊功能和樣式相對獨立的小“模塊”，這些“模塊”有些是很少重複的，有些是會大量重複的，我們可以將大量重複的“模塊”視為一個組件。我們從頁面裏盡可能多地將組件提取出來，放在common層就相當於MVC模式中的Model模型。為了保證重用性和靈活性，M需要盡可能將內部實現封裝，對可能會經常變化的部分提供靈活的接口。關於common層的技巧，下面將會介紹。
    common層就像建房時用到的門窗，不同風格的房子會用到不同樣式的門窗，各個房間用到的門窗的數量和位置可以不同，但樣式相同。門窗有自己的小元件，比如玻璃、門閂、門框、門板、鑰匙孔等。門窗可以整體移動、增減，但門窗本身的構造是相對穩定的。不同風格的房了就好比不同風格的網站，房子選用的門窗就好比這個網站選用的UI組件。門窗最好與整個房子的風格保持一致，同樣，網站最好讓UI組件的風格保持相同。UI組件是網站中的單位，在網站內部可以高度重用，但不同的網站可能會用不同的的UI組件。
    所以，common層是網站級的，不同的網站有不同的common層，同一個網站只有一個common層。common層是放在一個common.css文件裏，還是按照功能劃分放在諸如common-form.css或common-imageList.css多個文件裏，需要根據網站規模來決定。在團隊合作中，common層最好由一個人負責，統一管理。

3.3 Page層

    網站中高度重用的模塊，我們把它們視為組件，放在common層;非高度重用的模塊，可以把它們放在page層。page層位於最高層，提供頁面級的樣式。同樣以建房了為比喻，page層就好比是房間內的裝飾畫，不同的房間張貼的裝飾畫各不相同。它不像磚塊，所有房子都相同:也不像門窗，同一房子裏相同，它對重用性沒有要求，可根據各個房間布置的需要任意張貼。
page層是頁面級的，每個頁面都可能會有自己的page層css。