CSS的管理一直是個(gè)讓人有點(diǎn)頭疼的問題，沒有絕對(duì)的對(duì)錯(cuò)，無非就是為了方便管理、修改和多人合作罷了；

網(wǎng)上流行的CSS管理方式講來講去無非也就以下幾種：

1、對(duì)于單個(gè)頁面那種非常簡單的，其實(shí)也可以直接把所有的樣式寫在一個(gè)外部文件里就行，或者直接寫在頁面的頭部里，沒有必要去糾結(jié)繁瑣的CSS文件管理

2、讀過《精通CSS：高級(jí)Web標(biāo)準(zhǔn)解決方案》那本書的人都應(yīng)該對(duì)作者如何去組織、規(guī)劃和維護(hù)樣式表有深刻印象：

多個(gè)CSS文件可以利用@import導(dǎo)入的頁面中，好處是減少HTTP請(qǐng)求數(shù)，壞處是導(dǎo)入樣式要比鏈接樣式的速度慢，而且導(dǎo)入的文件有順序的規(guī)定，順序不當(dāng)常常會(huì)出現(xiàn)樣式?jīng)]辦法應(yīng)用等錯(cuò)誤，也是讓人無比糾結(jié)。

而對(duì)于全部寫在單個(gè)文件的，其內(nèi)部最好有合理的設(shè)計(jì)結(jié)構(gòu)和注釋：

（1）一般性樣式：

主體樣式；reset樣式；鏈接；標(biāo)題

（2）輔助樣式

表單；通用和錯(cuò)誤；一致的條目

（3）頁面結(jié)構(gòu)

標(biāo)題、頁腳和導(dǎo)航；布局；其他頁面結(jié)構(gòu)元素

（4）頁面組件

各個(gè)頁面

（5）覆蓋

然后使用大注釋塊來分割每個(gè)部分

/* @group general styles  
---------------------------------------------------------------*/ 

而小區(qū)域可以用小塊注釋：/*nav*/

這種分割方法雖然明確，但是需要開發(fā)人員進(jìn)行判斷，項(xiàng)目很大時(shí)，這種判斷是需要耗費(fèi)很多時(shí)間去很分析的，好的組織和規(guī)劃是需要耗時(shí)間的...

自我提示：

適當(dāng)?shù)淖⑨尶梢詾楹笃诘拈_發(fā)有很大的幫助，例如：

/*字體顏色定義說明  
@colordef #F00; 紅色  
*/ 

也可以使用@tudo來表示某些東西需要后期修改、修復(fù)或復(fù)查，用@bugfix表示代碼或特定瀏覽器遇到的問題，用@workaround表示并不完善的權(quán)宜之技（這些都跟JS的的相似，統(tǒng)稱為gotcha）

/*@tudo 網(wǎng)站上線之前記得刪除此規(guī)則*/ 
/*@bugfix 解決IE6的雙邊距問題*/ 
/*@workaround 我試圖去解決這個(gè)在IE6下的XXX問題，但它似乎表現(xiàn)的還不夠好*/ 

3、另外網(wǎng)上也流行一種模塊化css的文件分類方法：

reset.css // 對(duì)閱讀 器的默認(rèn)樣式執(zhí)行 重設(shè)  
layout.css // 管理頁面的布局  
typeset.css // 圖文的編排與  
color.css // 統(tǒng)一管理顏色的搭配  
print.css // 打印效果樣式  
ie.css // 把對(duì)ie的hack單獨(dú)分開 

或：

reset.css  
header.css // 頭部的所有樣式  
container.css // 除頭部/底部外的中間區(qū)域樣式  
footer.css // 底部樣式  
print.css  
ie.css 

以上的分類看似合理且僅僅有條，但管理起來很麻煩，也不是每個(gè)人都可以百分百了解每個(gè)CSS文件里面的內(nèi)容，所以疑問就來了：

（1）效率疑問 與最終目的

在站點(diǎn) 內(nèi)容上面，如果改某一個(gè)區(qū)域的內(nèi)容，可能要多個(gè) CSS都改。這樣一來，本來基本 的一個(gè)修改，開始變得復(fù)雜起來。并且，如果多個(gè)都改，可能會(huì)使我們忽略了某些東西，又須要 進(jìn)一步調(diào)試，這樣不僅肯使最終目的實(shí)現(xiàn)延后，還是一個(gè)效率的疑問 。

（2）調(diào)用盡可能少的CSS文件

大多樓情況下，一個(gè)站點(diǎn) 都是分成頭部，中部和底部，并且，一般，要做新的頻道/頁面之類的東西，都不會(huì)變動(dòng)頭部和底部，而只是變動(dòng)中間部分。這樣一 來，所有CSS文件都要調(diào)用，因?yàn)?，HTML和CSS的模塊化并不一致。這樣，就會(huì)導(dǎo)致服務(wù)器承受更多的壓力。這是一個(gè)方面。另一個(gè)方面是，如果新頁面中 某些元素與其他頁面有沖突，我們可能要搞一大堆關(guān)于優(yōu)先性選擇的代碼，添加 代碼量。這些都不是我們想要的。這就為什么要把header.css和 footer.css分開來的原由 。

（3）多人合作上的疑問

如果我們多個(gè)人在工作，大家的分工可能是，有人完成頭部的導(dǎo)航，有人完成底部的搜索條，有人完成中部新頁面的構(gòu)建。這樣一來，大家都同時(shí)在改多個(gè) 文 件，并且，改的東西不同。如果要更新到服務(wù)器，就要先比較 ，再更新。（當(dāng)然，現(xiàn)在有版本管理這樣的軟件。但是，同時(shí)工作的話，版本也是一個(gè)疑問 ，要相信， 或許更新永遠(yuǎn)都改不上改動(dòng) 。）

4、第四種就是采用CSS框架了，比如我最喜歡的960 GRID和YUI CSS Framework，大體原理一樣：一個(gè)css reset一個(gè)font定義和一個(gè)核心的Grids網(wǎng)格布局文件，然后就是各種布局位置計(jì)算,然后自己就可以寫頁面的其他樣式了

5、使用CSS預(yù)處理器（Sass、LESS 和 Stylus）幫助簡化CSS內(nèi)容和組織管理，這個(gè)可以常見詳細(xì)

我自己的管理組織管理方法：

之前看過的《編寫高質(zhì)量代碼 Web前端開發(fā)修煉之道》，作者給出了一個(gè)非常通用的css組織方式:base+common+page,但其實(shí)也有很多人喜歡把base直接寫在common里面，反正也是站點(diǎn)的幾乎所有頁面都調(diào)用，我用的最多的是commom（全站調(diào)用）+page（獨(dú)立頁面樣式，名字自定義也可）兩個(gè)文件的方式（也是因?yàn)楹髞眄?xiàng)目的原因才慢慢喜歡上的），當(dāng)然前提是全站風(fēng)格統(tǒng)一， 可以做得很模塊化，需求變動(dòng)不大；common的的樣式權(quán)限一定要在應(yīng)用效果的情況下保持盡可能低，以方便后期需求突變時(shí)可以強(qiáng)行覆蓋；

其實(shí)組織樣式考慮因素還是有的，只是一般我比較通用以上那種：

（1）首先當(dāng)然要看項(xiàng)目的規(guī)模和訪問量

項(xiàng)目的規(guī)模大小是組織樣式一個(gè)非常重要的參考基準(zhǔn)，小網(wǎng)站多幾個(gè)HTTP請(qǐng)求有何妨,多幾個(gè)樣式也不會(huì)有很大的性能變化，而像淘寶、新浪微博、騰訊QQ空間這些大項(xiàng)目就不同了，太多的CSS文件引入頁面會(huì)有較明顯的載入延遲，所以如何去盡量減少css文件的情況下做到盡可能的便于后期維護(hù)是重要的，如果有可能可以使用CDN；

參考之前的方法，可以為按功能或頁面區(qū)塊分成多個(gè)css文件,然后根據(jù)需要利用@import導(dǎo)入到一個(gè)文件中，然后再引入頁面中

（2）頁面實(shí)現(xiàn)的復(fù)雜度及需求變換程度

頁面的復(fù)雜程度基本上是如何組織CSS我覺得最重要的考慮因素了，風(fēng)格統(tǒng)一的網(wǎng)站header和footer不會(huì)變，我們可以做成一個(gè)模塊化方便調(diào)用、你可以把它寫在common.css里面全站都應(yīng)用，大家常用的reset也應(yīng)該寫在這里面，完全沒必要單獨(dú)寫一個(gè)reset.css文件，因?yàn)樗械娜径紩?huì)用到；然后最重要的就是分析頁面的其他部分是不是有設(shè)計(jì)相同的部分，有的話抽離出來放到common里面，全站都可以調(diào)用，這個(gè)就是所謂的CSS組件化了

還有一個(gè)非常糾結(jié)的問題，我想做前端時(shí)最理想的是：設(shè)計(jì)師設(shè)計(jì)好所有的稿然后交給前端“一次性”全部轉(zhuǎn)換為Web頁面、多好??！樣式等文件一開始就可以參照設(shè)計(jì)稿進(jìn)行全方位的規(guī)劃組織，想怎么弄怎么弄，清晰明了；可現(xiàn)實(shí)就是那么骨干、尼瑪有時(shí)設(shè)計(jì)稿變化大到你想吐血，還是半路穿插進(jìn)來的，你會(huì)發(fā)現(xiàn)什么頭部header和尾部footer又得重寫個(gè)新的了，之前的模塊話也都完全用不上了，而有時(shí)又只是一個(gè)頁面而已（比如專題頁），很不情愿為其模塊化， 糾結(jié)?。。晕页３Ｔ诓黄茐恼镜恼w風(fēng)格的情況下，會(huì)專門定義一個(gè)文件夾來存放這些蛋疼頁面的CSS樣式，我不想讓他們共用全站的CSS文件，這個(gè)文件里同樣有個(gè)common.css文件存放諸如css reset、base原子類供所有單獨(dú)頁面調(diào)用，然后每個(gè)頁面會(huì)有一個(gè)page.css或style.css專門定義頁面樣式的，而代碼冗余不冗余已經(jīng)不是重點(diǎn)了，管它去死，盡量寫得簡潔規(guī)范高效即可

原文鏈接：http://www.cnblogs.com/guosh/archive/2012/07/19/2599551.html