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