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

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

如果您有強烈的分離意識，尤其在大型的項目中，這段樣式可能會是這個樣子（注意命名）：


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

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

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

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

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

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

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

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

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


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


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


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

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

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

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

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

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

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

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

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

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

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

最新評論