道維向您推薦的一種組織CSS的方法
推薦的一種組織CSS的方法：base.css+common.css+page.css。將網(wǎng)站內(nèi)的所有樣式，按照職能分成三大類：base、common和page。在一般情況下，任何一個網(wǎng)頁的最終表現(xiàn)都是由這三者共同完成的。這三者并不是并列結(jié)構(gòu)，而是層疊結(jié)構(gòu)。
page
↓
common
↓
base
1.base層
這一層位于三者的最底層，提供CSS reset功能和粒度最小的通用類---原子類。
這一層會被所有頁面引用，是頁面樣式所需以來的最底層。這一層與具體UI無關(guān)，無論何種風(fēng)格的設(shè)計都可以引用它，素以base層要力求精簡和通用。這一層的核心職能猶如房子的地基一樣重要，亦扮演著網(wǎng)頁中最基礎(chǔ)的同樣重要的角色。
2.common層
這一層位于中間，提供組件級的CSS類。與common層相關(guān)的是樣式的模塊化，模塊化可以從樣式和行為兩個層面來考慮。我們可以將頁面內(nèi)的元素拆分成一小塊一小塊功能和樣式相對獨立的小模塊，這些模塊有些是很少重復(fù)的，有些是會大量重復(fù)的，我們可以將大量重復(fù)的模塊視為一個組件。我們從頁面盡可能多地將組件提取出來，放在common層里。common層就相當(dāng)于MVC模式中的M（Model模型）。為了保證重用性和靈活性，M需要盡可能將內(nèi)部實現(xiàn)封裝，對可能會經(jīng)常變化的部分提供靈活的接口。不同的房子選用不同的門窗，common層就像建房時用到的門窗，房子選用的門窗就好比這個網(wǎng)站選用的UI組件。門窗最好與整個房子的風(fēng)格保持一致。同樣，網(wǎng)站最好讓UI組件的風(fēng)格保持相同。UI組件是網(wǎng)站中的單位，在網(wǎng)站內(nèi)部可以高度重用，但不用的網(wǎng)站可能會用不同的UI組件。
所以，comman層的網(wǎng)站級的，不同的網(wǎng)站有不同的common層，同一個網(wǎng)站只有一個common層。common層是放在一個common.css文件里，還是按照功能劃分放在諸如common_form.css、common_imagelist.css的多個文件里，需要根據(jù)網(wǎng)站規(guī)模來決定。在團(tuán)隊合作中，common層最好由一個人負(fù)責(zé)，統(tǒng)一管理。
3.page層
網(wǎng)站中高度重用的模塊，我們把它們視為組件，放在common層；非高度重用的模塊，可以把它們放在page層。page層位于最高層，提供頁面級的樣式。page層就好比是房間內(nèi)的裝飾畫，不同房間的裝飾畫各不相同。
page層是頁面級的，每個頁面都可能有自己的page層CSS.page層的文件可以分離出來寫，也可以放在一個page.css文件里，根據(jù)頁面配上注釋，分塊書寫，便于維護(hù)。實例：
/*首頁*/
.test{}
.test2{}
/*關(guān)于我們*/
.test3{}
.test4{}
/*聯(lián)系我們*/
.test5{}
.test6{}
這樣做可能會帶來些冗余，比如，首頁的css文件里帶有“關(guān)于我們”、“聯(lián)系我們”頁的page層CSS文件，而這些對首頁的樣式毫無影響。但是，對于文件過于分散和集中的問題并沒有完美的解決方法，我們需要根據(jù)實際情況做些適當(dāng)?shù)恼壑小１绕鹱宲age層的CSS文件過于繁多和零散，把它們集中在一個文件中更便于維護(hù)，且便于瀏覽器緩存，瀏覽網(wǎng)站時只有首頁的下載時間較長，瀏覽其他頁面時反而較快。當(dāng)然，page.css還是應(yīng)當(dāng)越精簡越好，能用base層和common層的CSS解決的，就盡量不要用到page層。
base層基本上不需要維護(hù)，common層修改的幅度不會很大，通常只由一個人負(fù)責(zé)維護(hù)，但到了page層，代碼可能由多人開發(fā)，如何避免沖突是個需要注意的問題。通常我們通過命名規(guī)則來避免這種沖突。