一、引言
本文的核心觀點為CSS的合并與模塊化，似乎與前一篇文章“CSS樣式的再分離”有矛盾，其實不然，分離可以精簡CSS代碼，合并也可以精簡CSS代碼，一切都是權(quán)衡！或是說是在恰當?shù)那闆r下使用恰當?shù)氖侄巍?
正如前文所提到的，分離可以精簡CSS，但是同時會帶來巨大的HTML代碼的開銷，顯然，對所有的樣式進行再分離式不切實際的，是會帶來痛苦的。前文提到的“通用庫”看似屬于分離，其實又是分離之外的東西。“通用庫”屬于很良性的東西，任何網(wǎng)站都可以拿來用，不會產(chǎn)生什么副作用，因為其與當前項目的結(jié)構(gòu)，樣式表現(xiàn)沒有必然的關(guān)聯(lián)。“通用庫”就像是一個公共資源，大家都可以來采擷。但是“實際項目庫”卻是個燙手的山芋，這是根據(jù)當前實際項目分離出來的獨立樣式集合，我們可能會分理出頁面中常見的背景色樣式（如background-color:#f7f7f7;），可那會分理出特定的粗邊框樣式（如border:3px solid #c80000;），一般情況下，這是很ok的，但是，如果一些模塊化的樣式（例如整站通用的按鈕）也是使用的分離樣式組合而成，那么，后期要是修改按鈕樣式，就會很痛苦，因為會有那么多的樣式要替換。
所以，盲目的分離是會帶來惡果的。
本文的“合并”和“分離”屬于對立又相輔相成的，理解的“合并”與“分離”的精髓之后，您會發(fā)現(xiàn)寫CSS代碼就是一門藝術(shù)。同樣的，本文也是為我后面的“我的CSS架構(gòu)”一文做鋪墊的，寫這些都是為了同一個目的：寫出最精簡高效的CSS代碼。
二、明確“模塊化”專指“頁面元素的模塊化”
首先您要明確，樣式再分離是應(yīng)用到“模塊化的獨立元素”上可那會產(chǎn)生后期維護的問題，并不是應(yīng)用到“頁面模塊”會產(chǎn)生后期維護的問題。例如，我們將很多分離的樣式嵌入到一個整站通用的的“評論模塊”中，是不會產(chǎn)生任何所謂的后期維護的問題的，除非您網(wǎng)站的評論并不是個“模塊”，而是這里一段評論的HTML代碼，那里又是另外一評論的HTML代碼，有經(jīng)驗的開發(fā)人員都應(yīng)該清楚我想要表達的意思。
本文標題所說的“模塊化”指的是頁面元素，例如網(wǎng)站通用按鈕，通用選項卡，通用小圖標，或是頁面的一些固定框架結(jié)構(gòu)等。這些元素是不適宜使用樣式再分離的（或者說僅僅使用樣式再分離）。
三、什么是CSS樣式合并
何為CSS樣式合并，所謂CSS樣式合并，指的是一些不可分離的樣式（按鈕，圖標等），將他們公共的樣式部分進行合并，非公共的再次獨立出來，以減小CSS文件的大小。我想，合并的做法很多同行都做過，可能不是很徹底，或是系統(tǒng)。很多時候，我們知道合并的好處，但是往往由于各種原因，沒有從整體對樣式進行設(shè)計與架構(gòu)，造成樣式合并的效果基本上沒有發(fā)揮出來。下面我舉個實例，會讓您對樣式合并有一個更進一步的認識。此實例來自淘寶首頁，其對背景圖片的樣式合并。
我們使用小bug（我對firebug的昵稱）隨便看一個帶背景圖片的元素，例如下面這個（免費注冊按鈕）： 
此時firebug右側(cè)顯示的內(nèi)容截圖如下：
其對所有使用到這張sprite背景圖的樣式進行了合并，試想下，淘寶的背景圖片地址這么長，加入這些樣式不合并，那么首頁的CSS大小增加的量可能要上K了，對于淘寶首頁這樣大流量的的頁面來說，增加1K的大小，就是要從馬云手中拿走成百上萬的money~~
就我自己而言，使用最多的合并也是背景圖片的合并。其次就是一些效果類似但又不完全一致的模塊化元素。樣式的合并，沒有規(guī)律性可言，一般，遇到結(jié)構(gòu)或是寫法類似但又不完全一樣的元素的時候，就可以使用樣式的合并。
使用英文字符的逗號(,)分隔樣式名，將相同的樣式寫在后面，這也些類似于初中數(shù)學(xué)里的“合并同類項”。項目不同，情況也各異，要想達到充分的樣式合并，前期的設(shè)計與架構(gòu)很重要。
四、CSS分離與CSS合并的共存
CSS“通用庫”游離于三界之外，不參與這類紛爭（例如與其他元素合并）。這里的CSS分離指的就是在實際項目中分離出來的“實際項目庫”。一般情況下，“分離”與“合并”處于CSS文件的不同部分，兩者是不搭噶的。“分離”一般針對那些非模塊化的元素，而“合并”多針對模塊化的元素，所以兩者是對立的屬于不同類別的，之間不會產(chǎn)生什么沖突。由于兩者都有精簡CSS代碼的作用，所以雙管齊下，事半功倍。
雖說“井水不犯河水，雞腿有別鴨腿”，但是河水泛濫，家禽玩蛋之時，兩者也會產(chǎn)生交集的。“分離”與“合并”也是如此。這不是一句話能夠說清楚的，帶我娓娓道來。
前面提到，模塊化元素是不適宜使用分離的。比說如，文本框，設(shè)計師們往往喜歡在文本框上打主意，例如添加個淡灰漸變背景什么的，例如下面的效果（為截圖）：
這里的文本框就是整站通用的獨立的“模塊化元素”，是不推薦使用分離的。總共整個網(wǎng)站，文本框的寬度有好幾種，從寬度50像素左右的，200像素左右的，到450像素左右的都會有，我們不可能針對每個寬度寫一個獨立的樣式的。顯然，這里需要對文本框樣式進行合并，將公共的部分獨立出來，于是，我們可能會有如下的代碼（其中inset的背景與其他背景圖片元素進行合并了，所以這里只有background-position屬性）：
新聞熱點
疑難解答
