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