CSS的樣式合并與模塊化

1、css的樣式合并與模塊化byzhangxinxufrom HYPERLINK 本文地址： HYPERLINK /wordpress/?p=931 /wordpress/?p=931CSS分離與合并之合并byzhangxinxu譏E芒飛Y、引言本文的核心觀點(diǎn)為CSS的合并與模塊化，似乎與前一篇文章“CSS樣式的再分離”有矛盾，其實(shí)不然，分離可以精簡(jiǎn)CSS代碼，合并也可以精簡(jiǎn)CSS代碼，一切都是權(quán)衡！或是說(shuō)是在恰當(dāng)?shù)那闆r下使用恰當(dāng)?shù)氖侄?。正如前文所提到的，分離可以精簡(jiǎn)CSS，但是同時(shí)會(huì)帶來(lái)巨大的HTML代碼的開(kāi)銷(xiāo)，顯然，對(duì)所有的樣式進(jìn)行再分離式不切實(shí)際的，是會(huì)帶來(lái)痛苦的。前文提到的“通用庫(kù)”看似屬

2、于分離，其實(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:3pxsolid#c80000;),般情況下，這是很ok的，但是，如果一些模塊化的樣式(例如整站通用的按鈕)也是使用的分離樣式組合而成，那么，后期要是修改按鈕樣式，就會(huì)很痛苦，因?yàn)?/p>

3、會(huì)有那么多的樣式要替換。所以，盲目的分離是會(huì)帶來(lái)惡果的。本文的“合并”和“分離”屬于對(duì)立又相輔相成的，理解的“合并”與“分離”的精髓之后，您會(huì)發(fā)現(xiàn)寫(xiě)CSS代碼就是一門(mén)藝術(shù)。同樣的，本文也是為我后面的“我的CSS架構(gòu)”一文做鋪墊的，寫(xiě)這些都是為了同一個(gè)目的：寫(xiě)出最精簡(jiǎn)高效的CSS代碼。本文原地址： HYPERLINK /wordpress/?p=931 /wordpress/?p=931，來(lái)自張?chǎng)涡?鑫空間-鑫生活，訪問(wèn)原出處更多優(yōu)秀技術(shù)文章。本文作者：張?chǎng)涡?，歡迎訪問(wèn)我的個(gè)人網(wǎng)站。二、明確“模塊化”專(zhuān)指“頁(yè)面元素的模塊化”首先您要明確，樣式再分離是應(yīng)用到“模塊化的獨(dú)立元素”上可那會(huì)產(chǎn)生后期維護(hù)

4、的問(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ō)僅僅使用樣式再分離）。本文原地址： HYPERLINK /wordpress/?p=931 /wordpress/?p=931，來(lái)自張?chǎng)涡?鑫空間-

5、鑫生活，訪問(wèn)原出處更多優(yōu)秀技術(shù)文章。本文作者：張?chǎng)涡?，歡迎訪問(wèn)我的個(gè)人網(wǎng)站。三、什么是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ì)背景圖片的樣式合并。zxx:/淘寶首頁(yè)的Flashlogo很有愛(ài)啊，觀看點(diǎn)擊這里我們

6、使用小bug（我對(duì)firebug的昵稱(chēng)）隨便看一個(gè)帶背景圖片的元素，例如下面這個(gè)（免費(fèi)注冊(cè)按鈕）：此時(shí)firebug右側(cè)顯示的內(nèi)容截圖如下：a170X394背景圖片的樣式合并http:./孑b.bDx-3kin-blue.hd.box-sj.help-guestat.help-guestaj11aidicncnd.bd.act.tfgLi/張?chǎng)涡?爲(wèi)空間-軽生活1a、elk；帖E2E2E;,ir-c-li3tli.pnicEstrong./io-picedel.?sit-口廿.quick-linkli.貼j.quick-link1i3.zs-rav.quic-lirk.ytacbaob.-rc

7、iv.quick-1ir.quick-link.helpb.siTE-rav1i.mytaobao:hove.te-ravli.uytacbac-hove/11.telp:.isits-rcrv11.help-hovs.flverticol-caheI.vip-areaa.flvsrtlf#verticDl-charnElaspar.cazegory-lirks.category-linkscl.,t口zegory-lirk孑.CQTEgory-morej.category-norea.ipoducz.poducz-listli.podutT-J.poducT-list11.3b.豐roll.

8、b-bg.loll-prevspar：.lall-nextspar：豐roll.I?.c-zp.box.c-zpb.box.c-bz.box.c-bt.Tab-hcl1e.sElecT&d.tab-hcl.selECTds.overseasa,.hslp-ovEseasospar：.lirks-ponel.Isz-zab.current2Sgblde.cc-bc-zry.bzn-zry0background:urlCtp HYPERLINK /lsivjOS./tps/15ZT1B_4EXiiVfXXXXXXXX-17XTanspa-zr-z:器IJ其對(duì)所有使用到這張sprite背景圖的樣式進(jìn)

9、行了合并，試想下，淘寶的背景圖片地址這么長(zhǎng)，加入這些樣式不合并，那么首頁(yè)的CSS大小增加的量可能要上K了，對(duì)于淘寶首頁(yè)這樣大流量的的頁(yè)面來(lái)說(shuō)，增加1K的大小，就是要從馬云手中拿走成百上萬(wàn)的money就我自己而言，使用最多的合并也是背景圖片的合并。其次就是一些效果類(lèi)似但又不完全一致的模塊化元素。樣式的合并，沒(méi)有規(guī)律性可言，一般，遇到結(jié)構(gòu)或是寫(xiě)法類(lèi)似但又不完全一樣的元素的時(shí)候，就可以使用樣式的合并。使用英文字符的逗號(hào)(,)分隔樣式名，將相同的樣式寫(xiě)在后面，這也些類(lèi)似于初中數(shù)學(xué)里的“合并同類(lèi)項(xiàng)”。項(xiàng)目不同，情況也各異，要想達(dá)到充分的樣式合并前期的設(shè)計(jì)與架構(gòu)很重要。本文原地址： HYPERLINK /

10、wordpress/?p=931 /wordpress/?p=931，來(lái)自張?chǎng)涡?鑫空間-鑫生活，訪問(wèn)原出處更多優(yōu)秀技術(shù)文章。本文作者：張?chǎng)涡?，歡迎訪問(wèn)我的個(gè)人網(wǎng)站。四、CSS分離與CSS合并的共存CSS“通用庫(kù)”游離于三界之外，不參與這類(lèi)紛爭(zhēng)(例如與其他元素合并)。這里的CSS分離指的就是在實(shí)際項(xiàng)目中分離出來(lái)的“實(shí)際項(xiàng)目庫(kù)”。一般情況下，“分離”與“合并”處于CSS文件的不同部分，兩者是不搭噶的?！胺蛛x”一般針對(duì)那些非模塊化的元素，而“合并”多針對(duì)模塊化的元素，所以?xún)烧呤菍?duì)立的屬于不同類(lèi)別的，之間不會(huì)產(chǎn)生什么沖突。由于兩者都有精簡(jiǎn)css代碼的作用，所以雙管齊下，事半功倍。雖說(shuō)“井水不犯河水，

11、雞腿有別鴨腿”，但是河水泛濫，家禽玩蛋之時(shí)，兩者也會(huì)產(chǎn)生交集的?！胺蛛x”與“合并”也是如此。這不是一句話能夠說(shuō)清楚的，帶我娓娓道來(lái)。前面提到，模塊化元素是不適宜使用分離的。比說(shuō)如，文本框，設(shè)計(jì)師們往往喜歡在文本框上打主意，例如添加個(gè)淡灰漸變背景什么的，例如下面的效果（為截圖）：這里的文本框就是整站通用的獨(dú)立的“模塊化元素”，是不推薦使用分離的?？偣舱麄€(gè)網(wǎng)站，文本框的寬度有好幾種，從寬度50像素左右的，200像素左右的，到450像素左右的都會(huì)有，我們不可能針對(duì)每個(gè)寬度寫(xiě)一個(gè)獨(dú)立的樣式的。顯然，這里需要對(duì)文本框樣式進(jìn)行合并，將公共的部分獨(dú)立出來(lái)，于是，我們可能會(huì)有如下的代碼（其中inset的背景與

12、其他背景圖片元素進(jìn)行合并了，所以這里只有background-position屬性）：.insetheight:16px;background-position:0-220px;background-color:white;border:1pxsolid#D3D2D4;padding:3px02px2px;好的，以上就是inset的公共樣式，看上去像是分離，其實(shí)是合并?，F(xiàn)在唯一落下的就是寬度屬性了，這里寬度屬性為單一的屬性，我們是不是可以用“樣式分離”的意識(shí)將其分離出來(lái)，與其他元素公用呢，就像下面：.w163width:163px;.w297width:297px;.w397width:397

13、px;.w710width:710px;然后使用input時(shí)，HTML代碼如下：寬度1：寬度2：寬度3：同時(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ù)這里原則：模塊化

14、元素不分離！所以，這里的意識(shí)不能停在“分離”上，“分離”還是“不分離”主要體現(xiàn)在命名上，“分離”思想下的命名只針對(duì)屬性本身，猶如機(jī)器般，是沒(méi)有情感的，“無(wú)分離”思想的命名是針對(duì)頁(yè)面內(nèi)容，命名可以反映其所知道的大體內(nèi)容，有血有肉的，所以，上述文本框的寬度可以使用類(lèi)似下面的命名方式：.txtw1width:163px;.txtw2width:297px;.txtw3width:397px;.txtw4width:710px;使用使應(yīng)該如下html代碼：寬度1：inputtype=text寬度2：inputtype=text寬度3：class=insettxtw2/class=insettxtw3/

15、雖然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)作分離樣式使用，這種心情就像是看到花季少女跳樓般一一可惜了！實(shí)則不然，這里txtwl的樣式是可以當(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è)寬

16、度為163像素的獨(dú)立樣式txtwl,但是這個(gè)到嘴的肥鴨卻吃不得（前面提到的潛在風(fēng)險(xiǎn)），怎么辦，我們可以分離出一個(gè)163像素寬度的樣式w163，同時(shí)與txtwl進(jìn)行合并，這樣，就實(shí)現(xiàn)了樣式重用，又規(guī)避了潛在風(fēng)險(xiǎn)，于是，我們會(huì)有如下的樣式代碼：.txtw1,.w163width:163px;.txtw2width:297px;.txtw3width:397px;.txtw4width:710px;這就是“分離”與“合并”共存的極佳實(shí)例。要注意，只有頁(yè)面要使用到與文本框獨(dú)立寬度一樣寬度的時(shí)候才進(jìn)行分離并合并，所以以下做法是屬于犯傻不可取的：.txtw1,.w163width:163px;.txtw2

17、width:297px;.txtw3width:397px;.txtw4width:710px;現(xiàn)在，我們要修改txtw1樣式下的文本框?qū)挾葹?50像素，您直接改就行了，只有文本框應(yīng)用了這個(gè)樣式，不會(huì)有潛在問(wèn)題。但是，記得，這里的合并要還原，如下：.txtw1width:150px;.w163width:163px;可見(jiàn)，真正理解了“合并”與“分離”，就不會(huì)出現(xiàn)什么維護(hù)上的風(fēng)險(xiǎn)，相反，可以最大限度的發(fā)揮兩者共有的精簡(jiǎn)CSS的特性，相輔相成。本文原地址： HYPERLINK /wordpress/?p=931 /wordpress/?p=931，來(lái)自張?chǎng)涡?鑫空間-鑫生活，訪問(wèn)原出處更多優(yōu)秀技術(shù)

18、文章。本文作者：張?chǎng)涡?，歡迎訪問(wèn)我的個(gè)人網(wǎng)站。五、精簡(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)，類(lèi)似功能遍地開(kāi)花，啊哦！myladygaga!