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

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

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

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

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

我們使用小bug（我對(duì)firebug的昵稱）隨便看一個(gè)帶背景圖片的元素，例如下面這個(gè)（免費(fèi)注冊(cè)按鈕）：

此時(shí)firebug右側(cè)顯示的內(nèi)容截圖如下：

其對(duì)所有使用到這張sprite背景圖的樣式進(jìn)行了合并，試想下，淘寶的背景圖片地址這么長(zhǎng)，加入這些樣式不合并，那么首頁(yè)的CSS大小增加的量可能要上K了，對(duì)于淘寶首頁(yè)這樣大流量的的頁(yè)面來(lái)說(shuō)，增加1K的大小，就是要從馬云手中拿走成百上萬(wàn)的money~~
就我自己而言，使用最多的合并也是背景圖片的合并。其次就是一些效果類似但又不完全一致的模塊化元素。樣式的合并，沒(méi)有規(guī)律性可言，一般，遇到結(jié)構(gòu)或是寫法類似但又不完全一樣的元素的時(shí)候，就可以使用樣式的合并。

使用英文字符的逗號(hào)(,)分隔樣式名，將相同的樣式寫在后面，這也些類似于初中數(shù)學(xué)里的“合并同類項(xiàng)”。項(xiàng)目不同，情況也各異，要想達(dá)到充分的樣式合并，前期的設(shè)計(jì)與架構(gòu)很重要。

四、CSS分離與CSS合并的共存
CSS“通用庫(kù)”游離于三界之外，不參與這類紛爭(zhēng)（例如與其他元素合并）。這里的CSS分離指的就是在實(shí)際項(xiàng)目中分離出來(lái)的“實(shí)際項(xiàng)目庫(kù)”。一般情況下，“分離”與“合并”處于CSS文件的不同部分，兩者是不搭噶的。“分離”一般針對(duì)那些非模塊化的元素，而“合并”多針對(duì)模塊化的元素，所以兩者是對(duì)立的屬于不同類別的，之間不會(huì)產(chǎn)生什么沖突。由于兩者都有精簡(jiǎn)CSS代碼的作用，所以雙管齊下，事半功倍。

雖說(shuō)“井水不犯河水，雞腿有別鴨腿”，但是河水泛濫，家禽玩蛋之時(shí)，兩者也會(huì)產(chǎn)生交集的。“分離”與“合并”也是如此。這不是一句話能夠說(shuō)清楚的，帶我娓娓道來(lái)。
前面提到，模塊化元素是不適宜使用分離的。比說(shuō)如，文本框，設(shè)計(jì)師們往往喜歡在文本框上打主意，例如添加個(gè)淡灰漸變背景什么的，例如下面的效果（為截圖）：

這里的文本框就是整站通用的獨(dú)立的“模塊化元素”，是不推薦使用分離的?？偣舱麄€(gè)網(wǎng)站，文本框的寬度有好幾種，從寬度50像素左右的，200像素左右的，到450像素左右的都會(huì)有，我們不可能針對(duì)每個(gè)寬度寫一個(gè)獨(dú)立的樣式的。顯然，這里需要對(duì)文本框樣式進(jìn)行合并，將公共的部分獨(dú)立出來(lái)，于是，我們可能會(huì)有如下的代碼（其中inset的背景與其他背景圖片元素進(jìn)行合并了，所以這里只有background-position屬性）：

好的，以上就是inset的公共樣式，看上去像是分離，其實(shí)是合并。現(xiàn)在唯一落下的就是寬度屬性了，這里寬度屬性為單一的屬性，我們是不是可以用“樣式分離”的意識(shí)將其分離出來(lái)，與其他元素公用呢，就像下面：


然后使用input時(shí)，HTML代碼如下：


同時(shí)，分離出來(lái)的w163又能被頁(yè)面其他地方的元素重用，豈不是很好。好嗎？一點(diǎn)都不好！記住，模塊化的元素千萬(wàn)不能用“分離”的思想來(lái)處理！我們?cè)囅胍幌拢琼?xiàng)目全部完成了，主管說(shuō)：“這個(gè)文本框?qū)挾扔悬c(diǎn)長(zhǎng)，你給我改短一點(diǎn)”，試問(wèn)，您要怎么改？w163本身就已經(jīng)分離并語(yǔ)義明確化，就算你class名不變，修改后面的163px為140px，確實(shí)，所有的應(yīng)用w163樣式的文本框?qū)挾葴p小了，但是，項(xiàng)目上其他應(yīng)用了w163樣式的元素就遭殃了，這就是我提到的“痛苦”。避免以后產(chǎn)生痛苦，一定要技術(shù)這里原則：模塊化元素不分離！

所以，這里的意識(shí)不能停在“分離”上，“分離”還是“不分離”主要體現(xiàn)在命名上，“分離”思想下的命名只針對(duì)屬性本身，猶如機(jī)器般，是沒(méi)有情感的，“無(wú)分離”思想的命名是針對(duì)頁(yè)面內(nèi)容，命名可以反映其所知道的大體內(nèi)容，有血有肉的，所以，上述文本框的寬度可以使用類似下面的命名方式：


使用使應(yīng)該如下html代碼：


雖然txtw1也是分離出來(lái)的單樣式，但是由于其命名帶有內(nèi)容語(yǔ)義，所以，不會(huì)被貿(mào)然當(dāng)作分離樣式在其他地方適應(yīng)，而帶來(lái)后期維護(hù)潛在的問(wèn)題。

還沒(méi)完，其實(shí)上面都是講的“非分離”，不是講“共存”，似乎有點(diǎn)不切題。不急，下面才是關(guān)鍵。這里，txtw1明明是獨(dú)立樣式，卻不能當(dāng)作分離樣式使用，這種心情復(fù)雜——可惜了！實(shí)則不然，這里txtw1的樣式是可以當(dāng)作“分離”樣式使用的，如何使用？關(guān)鍵就是本節(jié)的關(guān)鍵字“合并”。我們可以將分離樣式與內(nèi)容語(yǔ)義的獨(dú)立樣式進(jìn)行合并，就可以實(shí)現(xiàn)樣式分離重用又沒(méi)有后期維護(hù)潛在風(fēng)險(xiǎn)的問(wèn)題。比方說(shuō)，我在做一個(gè)列表，這個(gè)列表的寬度就是163像素，嘿，正好，CSS中有個(gè)寬度為163像素的獨(dú)立樣式txtw1，但是這個(gè)到嘴的肥鴨卻吃不得（前面提到的潛在風(fēng)險(xiǎn)），怎么辦，我們可以分離出一個(gè)163像素寬度的樣式w163，同時(shí)與txtw1進(jìn)行合并，這樣，就實(shí)現(xiàn)了樣式重用，又規(guī)避了潛在風(fēng)險(xiǎn)，于是，我們會(huì)有如下的樣式代碼：


這就是“分離”與“合并”共存的極佳實(shí)例。
要注意，只有頁(yè)面要使用到與文本框獨(dú)立寬度一樣寬度的時(shí)候才進(jìn)行分離并合并，所以以下做法是屬于犯傻不可取的：


現(xiàn)在，我們要修改txtw1樣式下的文本框?qū)挾葹?50像素，您直接改就行了，只有文本框應(yīng)用了這個(gè)樣式，不會(huì)有潛在問(wèn)題。但是，記得，這里的合并要還原，如下：


可見(jiàn)，真正理解了“合并”與“分離”，就不會(huì)出現(xiàn)什么維護(hù)上的風(fēng)險(xiǎn)，相反，可以最大限度的發(fā)揮兩者共有的精簡(jiǎn)CSS的特性，相輔相成。

五、精簡(jiǎn)高效的CSS代碼是通力合作的結(jié)果
就算你CSS再牛叉，理解再深刻，沒(méi)有設(shè)計(jì)師以及后臺(tái)程序工程師的配合，您的CSS代碼會(huì)不得不變得不高效，甚至難以維護(hù)。
關(guān)于設(shè)計(jì)師的作用，我在前文已經(jīng)提到，這里不再多說(shuō)。關(guān)于后臺(tái)程序員，這里簡(jiǎn)單說(shuō)下。樣式再分離，最怕的就是整站通用的模塊化元素。如果網(wǎng)站系統(tǒng)架構(gòu)良好，凡事功能一致的模塊都是僅僅一段代碼，或是一個(gè)頁(yè)面片段，整站通用的，此時(shí)，“樣式再分離”的優(yōu)勢(shì)和潛力可謂發(fā)揮到了極致，分離樣式可以很放心的重用，很放心的分離（通用單元素和復(fù)雜結(jié)構(gòu)除外），因?yàn)榧词购笃谛薷模仓粫?huì)改一個(gè)地方，分離所帶來(lái)的多點(diǎn)維護(hù)的問(wèn)題就無(wú)從談起，分離只有百益而無(wú)一弊。但是，要是碰到“散槍法”的后臺(tái)程序員，沒(méi)有模塊化的思想，系統(tǒng)沒(méi)有良好的架構(gòu)，類似功能遍地開(kāi)花，啊哦！my lady gaga！我實(shí)在不敢想像此時(shí)應(yīng)用樣式分離那種餓殍遍野的慘況。

波音747的馬達(dá)裝載拖拉機(jī)上是不頂鳥(niǎo)用的。“分離”+“合并”的高效CSS代碼是需要設(shè)計(jì)師，前端開(kāi)發(fā)工程師，后臺(tái)開(kāi)發(fā)工程師都很專業(yè)的情況下才能發(fā)揮巨大效用的，如果不是這種情況，我建議還是沿著主流CSS的路子走，否則會(huì)有苦頭吃的。

六、結(jié)語(yǔ)
一些個(gè)人觀點(diǎn)，可能與您認(rèn)識(shí)相左，歡迎交流。要是有您認(rèn)為表述不準(zhǔn)確的地方，也歡迎指正。
就這些。

最新評(píng)論