淺析網(wǎng)站開發(fā)CSS架構(gòu)

　　說了這些，不難發(fā)現(xiàn)，CSS樣式越是分離，就可以使每個(gè)類重用性發(fā)揮到極最大化，CSS代碼就越精簡！不過凡事都不是絕對(duì)的，所謂此消彼長，當(dāng)CSS樣式分離的多了，自然html的代碼就會(huì)增加。如：tab選項(xiàng)卡，每個(gè)的寬度是自適應(yīng)的，還有定位的出現(xiàn)，那么html的代碼就夸張了，且繁瑣，不易維護(hù)。這時(shí)我們就不能只有CSS分離了；又如一組展示商品頁，所有的li左浮動(dòng)，若在每處加上的話，顯然不合適。從而，并非是所有的地方都適合使用分離獨(dú)立的樣式。從而需要權(quán)衡，而具體該怎么做，如何權(quán)衡？說的玄乎點(diǎn)，憑經(jīng)驗(yàn)，其實(shí)，這確實(shí)是一個(gè)憑借經(jīng)驗(yàn)來判斷的。

　　3.2 設(shè)計(jì)師的配合

　　不管設(shè)計(jì)師與前端開發(fā)是否是一人，要想使樣式的分離功效最大化，設(shè)計(jì)師所扮演的角色至關(guān)重要。

　　比如區(qū)塊間的間距，有10像素、15像素、12像素，邊框一處是#DADADA，一處又是#D4D4D4D等，那么獨(dú)立出的類重用性就大打折扣。

　　設(shè)計(jì)師在設(shè)計(jì)頁面時(shí)，也該有如后臺(tái)開發(fā)人員一樣的模塊意識(shí)，有時(shí)不能為了一處的效果好看些，就獨(dú)立一處的設(shè)計(jì)。當(dāng)然，物極必反，不能全部都統(tǒng)一風(fēng)格，還是有精細(xì)之處。

　　3.3 前端工程師的功力

　　之所以要分離CSS，其目的為的是精簡網(wǎng)站的CSS文件，倘若執(zhí)行者的水平，也就是功力不夠，那么在分離的同時(shí)，亦會(huì)增加更多的CSS代碼，如：不能很好的使用最簡單的代碼實(shí)現(xiàn)兼容的效果，使用了過多的hack等，反而枉然。從而對(duì)CSS理解透徹，對(duì)整站CSS進(jìn)行架構(gòu)及對(duì)分離權(quán)衡，至關(guān)重要。

　　4 CSS樣式合并

　　說完分離，下面來說合并，似乎這兩者有沖突，實(shí)際，目的是一致的，都是為了使CSS精簡。

　　CSS樣式合并，就是對(duì)一些不能分離的樣式，如背景圖片，將公共的部分合并，非公共的部分分離獨(dú)立出來，我常用的是應(yīng)對(duì)于 CSS Sprites,看下圖

　　微博頁面中對(duì)背景圖樣式進(jìn)行了合并，倘若不這樣，那增加的CSS代碼量就驚人了。當(dāng)然這種做法，是普通的，也是大家使用最多的。這里想說說另外一種樣式合并。我稱它為“組合式”樣式。

　　4.1 CSS分離與合并（組合）

　　這一觀點(diǎn)，也是我使用了樣式分離后，慢慢的在項(xiàng)目中發(fā)現(xiàn)的。之前說到了CSS通用庫，它就似“孫悟空”，跳出三界外，不在五行中。通用類的屬性都是CSS所固有的，非變量的。而還有一些分離出來的類，原先我也是放在通用庫中，如mt10: margin-top:10px; cor_1: #666;而現(xiàn)在我把它分離出通用庫，稱之為基本樣式庫。

　　分離一般使用在那些非模塊化的元素，這里說的合并就該是應(yīng)用于模塊化的元素。這里先跑下題，解釋下模塊化元素。其實(shí)是我沒說清楚，我說的模塊不是通常意義上如網(wǎng)站頁眉，頁腳等，而是頁面中的一個(gè)特定區(qū)塊，如按鈕、文本框、全站公用圖標(biāo)，這些模塊是不宜使用樣式分離的。

　　舉個(gè)例子：

　　這里我想再引入一個(gè)概念柵格化布局，具體什么不多說，只是因?yàn)檫@是個(gè)前提，我通常采用的是24欄寬度950的布局。說這個(gè)是解釋后面舉例中這些數(shù)值的來歷。

　　在定義獨(dú)立的樣式時(shí)，會(huì)定義大量乘40減10的寬度值，如230,190.270，510等，

　　.w1 { width: 230px; }

　　.w2 { width: 190px; }

　　.w3 { width: 270px; }

　　那么當(dāng)有一個(gè)層寬度剛好是230時(shí)，<div class=”w1”></div>

　　這個(gè)看似完美，其實(shí)隱患很多。后期一旦某一天要改變寬度，230改成240，單改w1的類，那么所有引用它的都會(huì)變，顯然不行。怎么辦，以前我的做法是，找這個(gè)div父層中的類，比如可能是在main層下面，那就再加個(gè)樣式

　　.mian w1 { width: 240px; }

　　可是也可能main下有幾個(gè)層都用到了w1，而只能改一個(gè)。怎么辦，放在以前我會(huì)單獨(dú)的給這個(gè)層命名，如side，然后單獨(dú)定義寬度。其實(shí)這種做法離我要表達(dá)的合并的概念很近了。而現(xiàn)在我同樣是給這個(gè)層命名side，但是不去定義它的寬度，而是直接<div class=”side w1”></div>

　　這樣，在沒有更改的情況下，它依然是寬度230，而當(dāng)有變化時(shí)。定義.side{width: 240px; } 因?yàn)榛緲邮綆煸陧撁嬉脮r(shí)在上面，而頁面特有樣式在下面，按照CSS的權(quán)重，后定義的權(quán)重大。這樣做，既保證了CSS樣式分離，對(duì)于模塊化元素又解除了隱患，同時(shí)使得這個(gè)模塊有了語義化的名稱。

　　5 CSS架構(gòu)

　　在說了這些前提后，就可以來說說我寫本文的目的了，CSS的架構(gòu)。

　　其實(shí)關(guān)于這點(diǎn)，前輩們又很多的做法，本文的開頭提過。對(duì)于符合web2.0的網(wǎng)站，我是只用一個(gè)CSS文件，因?yàn)轱L(fēng)格統(tǒng)一，不管頁面有多少，CSS文件可以控制的非常小，而且高性能，同時(shí)頁面擴(kuò)展性也非常好。但要是門戶型，就不適用了。那么就需要一個(gè)拆分，也就是架構(gòu)了。

　　1、CSS重置庫

　　2、通用樣式庫

　　3、公共樣式庫

　　4、布局樣式庫

　　5、按鈕、圖標(biāo)、表單庫

　　6、模塊庫

　　7、私有庫

　　5.1 CSS重置庫

說到這個(gè)，從最初級(jí)是不定義，到*{ margin:0; padding:0 }一棒子打死，再到body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td

{ margin: 0;padding: 0; }