一、引言
本文的核心觀點(diǎn)為CSS的合并與模塊化，似乎與前一篇文章“CSS樣式的再分離”有矛盾，其實(shí)不然，分離可以精簡CSS代碼，合并也可以精簡CSS代碼，一切都是權(quán)衡！或是說是在恰當(dāng)?shù)那闆r下使用恰當(dāng)?shù)氖侄巍?
正如前文所提到的，分離可以精簡CSS，但是同時會帶來巨大的HTML代碼的開銷，顯然，對所有的樣式進(jìn)行再分離式不切實(shí)際的，是會帶來痛苦的。前文提到的“通用庫”看似屬于分離，其實(shí)又是分離之外的東西。“通用庫”屬于很良性的東西，任何網(wǎng)站都可以拿來用，不會產(chǎn)生什么副作用，因?yàn)槠渑c當(dāng)前項(xiàng)目的結(jié)構(gòu)，樣式表現(xiàn)沒有必然的關(guān)聯(lián)。“通用庫”就像是一個公共資源，大家都可以來采擷。但是“實(shí)際項(xiàng)目庫”卻是個燙手的山芋，這是根據(jù)當(dāng)前實(shí)際項(xiàng)目分離出來的獨(dú)立樣式集合，我們可能會分理出頁面中常見的背景色樣式（如background-color:#f7f7f7;），可那會分理出特定的粗邊框樣式（如border:3px solid #c80000;），一般情況下，這是很ok的，但是，如果一些模塊化的樣式（例如整站通用的按鈕）也是使用的分離樣式組合而成，那么，后期要是修改按鈕樣式，就會很痛苦，因?yàn)闀心敲炊嗟臉邮揭鎿Q。
所以，盲目的分離是會帶來惡果的。

本文的“合并”和“分離”屬于對立又相輔相成的，理解的“合并”與“分離”的精髓之后，您會發(fā)現(xiàn)寫CSS代碼就是一門藝術(shù)。同樣的，本文也是為我后面的“我的CSS架構(gòu)”一文做鋪墊的，寫這些都是為了同一個目的：寫出最精簡高效的CSS代碼。

二、明確“模塊化”專指“頁面元素的模塊化”
首先您要明確，樣式再分離是應(yīng)用到“模塊化的獨(dú)立元素”上可那會產(chǎn)生后期維護(hù)的問題，并不是應(yīng)用到“頁面模塊”會產(chǎn)生后期維護(hù)的問題。例如，我們將很多分離的樣式嵌入到一個整站通用的的“評論模塊”中，是不會產(chǎn)生任何所謂的后期維護(hù)的問題的，除非您網(wǎng)站的評論并不是個“模塊”，而是這里一段評論的HTML代碼，那里又是另外一評論的HTML代碼，有經(jīng)驗(yàn)的開發(fā)人員都應(yīng)該清楚我想要表達(dá)的意思。

本文標(biāo)題所說的“模塊化”指的是頁面元素，例如網(wǎng)站通用按鈕，通用選項(xiàng)卡，通用小圖標(biāo)，或是頁面的一些固定框架結(jié)構(gòu)等。這些元素是不適宜使用樣式再分離的（或者說僅僅使用樣式再分離）。

三、什么是CSS樣式合并
何為CSS樣式合并，所謂CSS樣式合并，指的是一些不可分離的樣式（按鈕，圖標(biāo)等），將他們公共的樣式部分進(jìn)行合并，非公共的再次獨(dú)立出來，以減小CSS文件的大小。我想，合并的做法很多同行都做過，可能不是很徹底，或是系統(tǒng)。很多時候，我們知道合并的好處，但是往往由于各種原因，沒有從整體對樣式進(jìn)行設(shè)計與架構(gòu)，造成樣式合并的效果基本上沒有發(fā)揮出來。下面我舉個實(shí)例，會讓您對樣式合并有一個更進(jìn)一步的認(rèn)識。此實(shí)例來自淘寶首頁，其對背景圖片的樣式合并。