CSS模塊化之如果組織好css?

在w3ctech上閑逛,偶然看到了第一期討論的話題"網(wǎng)站重構(gòu)中的文件組織",于是想寫篇自己關(guān)于css組織的理解和想法,如下:

1.分類
1.1網(wǎng)站頻道類
|--reset層:包含對(duì)樣式重置,及一些常用樣式名,如fl是float:left,tc是text-align:center;
|--base層:包含header,menu,footer及一些常用組件,如popup,tip,banner等等;
|--channel層:常用頻道層,即網(wǎng)站二級(jí)欄目,如forum,comic等等
|----page層:如果channel層還有三級(jí)頻道,則把此channel層再度分離,首先提取此頻道的公用部分,做個(gè)page-public.css,此頻道的主體分為page1-a,css,page1-b,page1-c...

1.2活動(dòng),專題類,不同于網(wǎng)站頻道類,活動(dòng)頁面主體內(nèi)容比較固定,上線時(shí)間短,故把活動(dòng)分成模塊,按需加載自己需要的模塊.如
活動(dòng)-評(píng)論模塊 events-comment.css,活動(dòng)-投票排行 events-vote.css,活動(dòng)-注冊(cè)模塊 events-registration.css,活動(dòng)-分頁模塊 events-page.css.

2.分層舉例
2.1一般二級(jí)頻道,如漫客頻道,它的css結(jié)構(gòu)為
|--reset.css
|--base.css
|--make.css

2.2大型二級(jí)頻道,如動(dòng)漫頻道,內(nèi)含三個(gè)子頻道,則它的css結(jié)構(gòu)為
|--reset.css
|--base.css
|--comic-public.css
|----comic.css
|----comic-cartoon.css
|----comic-book.css

2.3一般性活動(dòng),含有注冊(cè),評(píng)論,投票模塊(注:此處沒有引用網(wǎng)站頻道類中的base層)
|--reset.css
|--events-registration.css
|--events-comment.css
|--events-vote.css

3.團(tuán)隊(duì)合作
如A工程師和B工程師同時(shí)開發(fā)pk(二級(jí)頻道),開發(fā)流程如下:
第一步:A和B討論研究提取公共模塊,如果已在base層里了,則直接從base層里取得,如果是新的公共模塊,則添加到base層里.僅pk頻道里的公共模塊提取之后形成pk-public.css.
第二步:A工程師的css首先寫在pk-a.css里,同樣B寫在pk-b.css,最后項(xiàng)目完成后,把pk-a.css和pk-b.css合并成pk-ab.css,為了減少?zèng)_突,A工程師的css以a為前綴,如.pk-a-title,.pk-a-main,.pk-a-a等等.

4.樣式合并
如上舉例中的2至少要引用四個(gè)css,如果增加其它應(yīng)用,那么css文件數(shù)量是非常多的,那怎么處理呢?
QA階段加載正常數(shù)量的css文件,上線之前把樣式合并,并壓縮.
推薦使用工具:"樣式文件合并工具 mergeCSS".b