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