CSS樣式分離之再分離達(dá)到精簡(jiǎn)與重用

發(fā)布時(shí)間：2013-01-11 10:20:20 作者：佚名

無(wú)論是CSS的分離還是js的分離，其主要作用之一就是精簡(jiǎn)與重用,CSS本身就代表著精簡(jiǎn)與重用,CSS樣式分離，我一般指的是“以單獨(dú)的CSS文件將CSS樣式分離出來(lái)”，此處的重用多針對(duì)不同頁(yè)面的重用，就是說(shuō)，一個(gè)樣式文件，可以多個(gè)頁(yè)面使用，這對(duì)于一些公共樣式的重構(gòu)是很有

一、關(guān)于CSS樣式分離
zxx://一些名詞表意含有自己的理解成分，或許與您的理解有偏差，希望不要拘泥于措辭。
無(wú)論是CSS的分離還是js的分離，其主要作用之一就是精簡(jiǎn)與重用。
CSS本身就代表著精簡(jiǎn)與重用。例如我們可以設(shè)置一個(gè)如下的樣式：
.example{color:red;}所有想讓文字顯示紅色的標(biāo)簽都可以應(yīng)用這個(gè)樣式，這比10年前使用font標(biāo)簽，將color樣式寫(xiě)在font標(biāo)簽上（尤其標(biāo)簽多時(shí)）要精簡(jiǎn)很多代碼，代碼可讀性也更佳。
CSS樣式分離，我一般指的是“以單獨(dú)的CSS文件將CSS樣式分離出來(lái)”，此處的重用多針對(duì)不同頁(yè)面的重用，就是說(shuō)，一個(gè)樣式文件，可以多個(gè)頁(yè)面使用，這對(duì)于一些公共樣式的重構(gòu)是很有用的。當(dāng)然，對(duì)于一些重要的頁(yè)面，例如淘寶首頁(yè)，直接將CSS嵌在了頁(yè)面頭部，其降低鏈接請(qǐng)求的重要性要大于樣式的重用。
以上估計(jì)大家都是很熟悉與常用的，我一般不會(huì)拿一些眾所周知的白蠟?zāi)脕?lái)嚼的。本文會(huì)展示一些新的東西，關(guān)于CSS樣式分離再分離。本文核心不在于展示如果分離，而是傳達(dá)一種“庫(kù)”與“CSS高度重用”的概念，同時(shí)也是為后面的文章“我是如何對(duì)項(xiàng)目CSS進(jìn)行架構(gòu)”做鋪墊的。

二、CSS樣式分離之再分離
“CSS樣式分離之再分離”表型上的兩個(gè)特點(diǎn)為“分離”和“命名”，掌握與理解其深層次思想的關(guān)鍵是思維方式的轉(zhuǎn)變，這包括“CSS庫(kù)概念”意識(shí)。舉個(gè)例子吧，依照現(xiàn)在主流的寫(xiě)法，下截圖所示的灰色背景的框框命名與樣式可能如下：
pic

復(fù)制代碼

代碼如下:

.topic_edit_box{display:inline-block; border:1px solid #ddd; background:#f7f7f7; padding:20px 40px;}

如果您有強(qiáng)烈的分離意識(shí)，尤其在大型的項(xiàng)目中，這段樣式可能會(huì)是這個(gè)樣子（注意命名）：

復(fù)制代碼

代碼如下:

.dib{display:inline-block;}
.bdd border:1px solid #ddd;}
.bgf7{background:#f7f7f7;}
.p20_40{padding:20px 40px;}

字面上很容易理解，就是把這段樣式分離成一個(gè)一個(gè)單獨(dú)的樣式。當(dāng)然，這只是表象，要想讓樣式再分離發(fā)揮其最大的功效，對(duì)其精髓思想有著較為深入的理解是很必須的，否則，您可能會(huì)用的很痛苦，或是濫用而產(chǎn)生其他一些問(wèn)題。

三、樣式分離再分離精簡(jiǎn)作用的理論基礎(chǔ)
高中時(shí)學(xué)習(xí)馬克思主義哲學(xué)，記得有部分是關(guān)于理論與實(shí)踐的，“理論指導(dǎo)實(shí)踐”，這句話(huà)對(duì)我影響很大。在我看來(lái)，任何一門(mén)學(xué)問(wèn)，要想做到一定的高度，必須有一定的理論基礎(chǔ)，這個(gè)理論可以在別人看來(lái)或是100年后看來(lái)是錯(cuò)誤的，只要能在當(dāng)下解釋清楚，自圓其說(shuō)，這就是優(yōu)秀的理論。即使是做技術(shù)也是如此，我現(xiàn)在總是會(huì)從哲學(xué)中找到與現(xiàn)在所從事的技術(shù)所相同的地方，并將之歸納，以自己一套理論解釋它，當(dāng)然，這個(gè)理論不是憑空而來(lái)，而是在其他一些理論基礎(chǔ)上建立起來(lái)的，例如，中國(guó)古代的那些傳承千年的哲學(xué)觀。

即使沒(méi)有讀過(guò)關(guān)于中國(guó)古代的一些哲學(xué)著作，例如《老子》《易經(jīng)》，也應(yīng)該在中國(guó)的神話(huà)劇中聽(tīng)過(guò)一些哲學(xué)觀點(diǎn)，這些觀點(diǎn)往往都是這些哲學(xué)體系的核心。例如：“無(wú)極生太極,太極生兩儀,兩儀生四向,四向生八卦,八卦生五行”。

按照“五行”學(xué)說(shuō)，大自然是由“金木水火土”這五種要素所構(gòu)成，隨著這五個(gè)要素的盛衰，而使得大自然產(chǎn)生變化，不但影響到人的命運(yùn)，同時(shí)也使宇宙萬(wàn)物循環(huán)不已。

五行圖片張?chǎng)涡?鑫空間-鑫生活

也就是說(shuō)，我們深處的整個(gè)自然，整個(gè)宇宙，僅僅通過(guò)5個(gè)元素就構(gòu)成了。這5個(gè)元素，我們可以理解為基礎(chǔ)，或者說(shuō)是“庫(kù)”。
如果我們把自然宇宙當(dāng)作是一個(gè)復(fù)雜的頁(yè)面，那么，這個(gè)頁(yè)面僅僅使用5個(gè)樣式就可以構(gòu)成了！

再舉另外一個(gè)例子，與我的大學(xué)生物專(zhuān)業(yè)相關(guān)的，人類(lèi)的生老病死，復(fù)雜的行為，情感，歸根結(jié)底都是有基因?控制的，而基因僅僅有5種不同類(lèi)型的堿基?構(gòu)成。也就是說(shuō)，我們?nèi)祟?lèi)一切的一切都是有5中堿基（腺嘌呤、鳥(niǎo)嘌呤、胞嘧啶、胸腺嘧啶和尿嘧啶）構(gòu)成的。

如果我們把人這個(gè)生物看做一個(gè)頁(yè)面，那么這個(gè)頁(yè)面僅僅使用5個(gè)樣式就可以構(gòu)成了。
不必深究細(xì)節(jié)，重在這類(lèi)構(gòu)成思想。

回到主題，我們的頁(yè)面結(jié)構(gòu)與表現(xiàn)是由CSS+HTML構(gòu)成的，想想看，在CSS2中，總共有多少個(gè)屬性，是很有限的。如果我們把CSS中的每個(gè)樣式獨(dú)立出來(lái)，作為最最基本的構(gòu)成元素，就像基因中的堿基一樣，那么，我們實(shí)際上、理論上要使用的CSS代碼量是非常非常之少的，不會(huì)出現(xiàn)開(kāi)心網(wǎng)一樣高達(dá)81K大小的樣式文件了。
如果CSS是堿基，那么理論上CSS文件大小僅僅是5個(gè)CSS屬性的大小，如下：

復(fù)制代碼

代碼如下:

A{a~~}
G{g~~}
C{c~~}
T{t~~}
U{u~~}

也就是說(shuō)，最小的CSS文件不足50個(gè)字符大小。萬(wàn)物是相對(duì)，辯證的，CSS雖然理論上非常之小，但是，要實(shí)現(xiàn)同樣的效果，HTML代碼量就是非常龐大，于是可能會(huì)有類(lèi)似下面的HTML代碼：

復(fù)制代碼

代碼如下:

一切都是權(quán)衡。
實(shí)際上，CSS有幾十種不同的屬性，撇開(kāi)一些不定參數(shù)（例如寬度，高度，顏色值）的樣式，CSS的基礎(chǔ)構(gòu)成也是非常有限的，例如下面截取的的一小段CSS庫(kù)樣式（命名僅供參考）：

復(fù)制代碼

代碼如下:

.l{float:left;}.r{float:right;}.cl{clear:both;}
.tc{text-align:center;}.tr{text-align:right;}.tl{text-align:left;}
.tdl{text-decoration:underline;}.tdn,a.tdl:hover,a.tdn:hover{text-decoration:none;}
.b{font-weight:bold;}.n{font-weight:normal; font-style:normal;}
.vm{vertical-align:middle;}.vtb{vertical-align:text-bottom;}.vt{vertical-align:top;}.vn{vertical-align:-2px;}
.fa{font-family:arial;}.ft{font-family:tahoma;}.fw{font-family:"微軟雅黑"}.fs{font-family:'宋體';}
.rel{position:relative;}.abs{position:absolute;}.ovh{overflow:hidden;}
.dn{display:none;}.db{display:block;}.dib{display:inline-block;}.di{display:inline;}
.cur{cursor:pointer;}

所以，理論上講，幾乎一半的樣式效果，只需要上面這點(diǎn)CSS代碼就可以了，例如，我們需要設(shè)置一個(gè)字體為“微軟雅黑”，粗體，inline-block水平，相對(duì)定位的樣式，則代碼如下：

復(fù)制代碼

代碼如下:

樣式的獨(dú)立拆分，使得各種效果可以自由組合，這是有別于一個(gè)class類(lèi)覆蓋多個(gè)CSS屬性的做法的。樣式的獨(dú)立拆分，精簡(jiǎn)的CSS文件，每個(gè)樣式的重用性可謂發(fā)揮到的最大，同時(shí)，頁(yè)面的后期維護(hù)變得異常輕松，樣式?jīng)_突的可能性也是非常低的。實(shí)際上的CSS獨(dú)立樣式庫(kù)不僅僅是上面展示的，還包括常見(jiàn)顏色，常見(jiàn)margin于padding值，清除浮動(dòng)屬性等。
CSS樣式庫(kù)又分為“通用庫(kù)”，和“當(dāng)前項(xiàng)目庫(kù)”，不是本節(jié)重點(diǎn)，不多說(shuō)。

總結(jié)這一節(jié)的核心觀點(diǎn)，其實(shí)不難理解，就是“構(gòu)成的基本元素越是獨(dú)立，越是最簡(jiǎn)，其組合的可能性，元素的利用率越是高！”，CSS樣式越是分離，其樣式的利用率和覆蓋率就越高，CSS代碼就越精簡(jiǎn)！
萬(wàn)物守恒，CSS的精簡(jiǎn)會(huì)導(dǎo)致部分HTML代碼的開(kāi)銷(xiāo)增大。本節(jié)重點(diǎn)在于理論，實(shí)際情況下面再敘述。

四、樣式徹底分離的副作用
前面提到，就理論而言，樣式越是拆分的徹底，CSS代碼越是精簡(jiǎn)，CSS代碼的重用率以及單個(gè)頁(yè)面CSS樣式的覆蓋率都會(huì)相當(dāng)驚人。但是，物極必反，理論不能代表實(shí)踐。如果我們把所有的CSS樣式進(jìn)行拆分。對(duì)于一些復(fù)雜的UI效果，例如圓角自適應(yīng)的導(dǎo)航，則此處的HTML代碼開(kāi)銷(xiāo)會(huì)非常之大，此時(shí)一味的樣式再分離，會(huì)使得HTML代碼變得很痛苦。
所以，我們需要權(quán)衡，何時(shí)分離，哪些要分離？樣式精簡(jiǎn)與重用僅僅是通過(guò)分離嗎。

上面的問(wèn)題不是一句話(huà)能說(shuō)清楚的，其中有點(diǎn)只可意會(huì)的味道，這需要經(jīng)驗(yàn)，以及結(jié)合自己的那套CSS準(zhǔn)則，布局思想等！
但是，可以肯定的是，所有樣式都要分離顯然是不行的，更加可以肯定的是，目前基本上所有的網(wǎng)站的樣式的分離都是不夠的，遠(yuǎn)遠(yuǎn)不夠，CSS也是需要架構(gòu)的，而沒(méi)有架構(gòu)這一意識(shí)，分離反而會(huì)出問(wèn)題。

五、不得不提的網(wǎng)頁(yè)設(shè)計(jì)師
要想讓樣式分離發(fā)揮巨大的潛力，設(shè)計(jì)師在其中也扮演了至關(guān)重要的作用。如果遇到的是很隨性的，細(xì)節(jié)要求不嚴(yán)的，沒(méi)有固定設(shè)計(jì)準(zhǔn)則的網(wǎng)頁(yè)設(shè)計(jì)師，那么，抱歉，樣式分離的驚人效用將大打折扣。不難理解，拿間距來(lái)說(shuō)，假設(shè)一個(gè)項(xiàng)目60張?jiān)O(shè)計(jì)頁(yè)面，結(jié)果模塊間間距有的10像素，有的10像素，有的則15像素；或是內(nèi)邊距(padding)，沒(méi)有統(tǒng)一的邊距值，那么就會(huì)比較糟糕，分離出來(lái)的獨(dú)立CSS重用性就很低，不但增加了CSS文件大小，頁(yè)面本身就缺少統(tǒng)一性；或是顏色的例子，文字顏色憑感覺(jué)來(lái)，這里#333，那里又是#454545，然后又是#484848，這顯然會(huì)有問(wèn)題?；蚴菍挾却笮〉脑O(shè)置等。
設(shè)計(jì)師設(shè)計(jì)要有模塊化的思想，不要這里想到一個(gè)不多的設(shè)計(jì)效果，這里用一個(gè)，那里想到一個(gè)效果，就用另一個(gè)。這本身就缺少重用性，這會(huì)使得分離的效用大打折扣的。

六、隱形的閾值
我認(rèn)為，分離的終極目的在于精簡(jiǎn)這個(gè)網(wǎng)站的CSS文件，將整個(gè)網(wǎng)站的CSS文件只精簡(jiǎn)至一個(gè)。于是這其中就存在一個(gè)閾值的問(wèn)題，如果分離的功力不夠，或是理解不夠準(zhǔn)確透徹，則網(wǎng)站的CSS文件就會(huì)大于50K，這時(shí)，可能就是又走上以前多樣式文件，系列頁(yè)面拆分的老路了。所以，其中就存在了一個(gè)隱形的閾值，是一個(gè)單CSS文件還是多CSS文件的閾值。
實(shí)際上，我是可以保證，一個(gè)CSS文件就可以搞定整個(gè)網(wǎng)站項(xiàng)目（前提是網(wǎng)站的風(fēng)格要統(tǒng)一，要是這一個(gè)頁(yè)面婉約派，另外一個(gè)豪放派，那就沒(méi)轍了）的。但是，不是每個(gè)人都可以實(shí)現(xiàn)的，這需要對(duì)CSS理解透徹，知道如何使用最簡(jiǎn)單的代碼實(shí)現(xiàn)同樣的兼容性的效果；還要知道對(duì)整站CSS進(jìn)行架構(gòu)，還需要知道樣式要適時(shí)合并。
如果您跨不了這個(gè)閾值，分離的作用僅僅是一定程度上精簡(jiǎn)的CSS，減小了一些開(kāi)發(fā)維護(hù)成本而言，其更強(qiáng)大的精簡(jiǎn)CSS文件個(gè)數(shù)的作用就體現(xiàn)不出來(lái)了！

七、重要的結(jié)語(yǔ)
我從以前講布局思想，講無(wú)CSS rest，到現(xiàn)在的CSS樣式分離之再分離，以及后面的CSS架構(gòu)，都是一個(gè)體系里面的。我清楚的指導(dǎo)，這些東西，其實(shí)很多優(yōu)秀的前端人員也是知道一二，或是比我理解更深刻的。但是，對(duì)于大多數(shù)同行而言，可能認(rèn)為我“又在挑刺”，其實(shí)不然。

我把我自己的理解講出來(lái)，是希望讓您知道，現(xiàn)在絕大多數(shù)的CSS寫(xiě)法，架構(gòu)都是有很多不足的，缺少創(chuàng)新。我就這么跟您說(shuō)吧，您所做的任何項(xiàng)目，其實(shí)根本只要一個(gè)CSS文件就足夠，您要是真的通透了CSS的“分離”、“架構(gòu)”，即使這個(gè)網(wǎng)站項(xiàng)目有100個(gè)頁(yè)面（風(fēng)格統(tǒng)一），您也可以只使用一個(gè)CSS頁(yè)面，并且可以控制CSS文件（未壓縮）在40K以下。

我是自信可以這么實(shí)現(xiàn)的。我最近做的項(xiàng)目50多個(gè)頁(yè)面，未壓縮（含大量注釋?zhuān)Q排）的CSS文件，就30K左右，服務(wù)器端壓縮后僅11K左右，同時(shí)網(wǎng)站整站自適應(yīng)，從內(nèi)容到各個(gè)按鈕，導(dǎo)航，全部寬度自適應(yīng)，兼容性良好。

要想CSS足夠精簡(jiǎn)高效，請(qǐng)使用流體布局，少或無(wú)CSS reset，樣式分離，樣式合并，樣式架構(gòu)，理解所謂的“兼容性”。
這里提到的6點(diǎn)，前兩點(diǎn)在前面的文章中已經(jīng)簡(jiǎn)單闡釋過(guò)，第三點(diǎn)“分離”就是本文的內(nèi)容，而后面的合并，架構(gòu)，以及“兼容性”將在后面按順序闡述。
最后，還想強(qiáng)調(diào)一下適應(yīng)性的問(wèn)題。這里提到的“體系”純粹是自己思考，積累形成的，是否對(duì)其他人適用，我是很懷疑的，尤其一些自認(rèn)為CSS還不錯(cuò)，有一套自己固有模式的同行。人總是不同的，對(duì)CSS關(guān)注的地方也有所差異，成長(zhǎng)學(xué)習(xí)經(jīng)歷不同，所處的團(tuán)隊(duì)不同，種種因素使得這些我認(rèn)為非常有用，百益無(wú)一害的方法、思想在別人看來(lái)不通，一文不值，這也是可以理解的。

最后的最后，我呢，其實(shí)從業(yè)時(shí)間也短，資歷還是有限的，有些想法，觀點(diǎn)或許有不準(zhǔn)確之處，歡迎各位同行指正。也歡迎發(fā)表您的觀點(diǎn)，或是通過(guò)評(píng)論或是點(diǎn)擊這里?與我進(jìn)行溝通交流。