淺析網站開發CSS架構

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

　　3.2 設計師的配合

　　不管設計師與前端開發是否是一人，要想使樣式的分離功效最大化，設計師所扮演的角色至關重要。

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

　　設計師在設計頁面時，也該有如后臺開發人員一樣的模塊意識，有時不能為了一處的效果好看些，就獨立一處的設計。當然，物極必反，不能全部都統一風格，還是有精細之處。

　　3.3 前端工程師的功力

　　之所以要分離CSS，其目的為的是精簡網站的CSS文件，倘若執行者的水平，也就是功力不夠，那么在分離的同時，亦會增加更多的CSS代碼，如：不能很好的使用最簡單的代碼實現兼容的效果，使用了過多的hack等，反而枉然。從而對CSS理解透徹，對整站CSS進行架構及對分離權衡，至關重要。

　　4 CSS樣式合并

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

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

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

　　4.1 CSS分離與合并（組合）

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

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

　　舉個例子：

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

　　在定義獨立的樣式時，會定義大量乘40減10的寬度值，如230,190.270，510等，

　　.w1 { width: 230px; }

　　.w2 { width: 190px; }

　　.w3 { width: 270px; }

　　那么當有一個層寬度剛好是230時，<div class=”w1”></div>

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

　　.mian w1 { width: 240px; }

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

　　這樣，在沒有更改的情況下，它依然是寬度230，而當有變化時。定義.side{width: 240px; } 因為基本樣式庫在頁面引用時在上面，而頁面特有樣式在下面，按照CSS的權重，后定義的權重大。這樣做，既保證了CSS樣式分離，對于模塊化元素又解除了隱患，同時使得這個模塊有了語義化的名稱。

　　5 CSS架構

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

　　其實關于這點，前輩們又很多的做法，本文的開頭提過。對于符合web2.0的網站，我是只用一個CSS文件，因為風格統一，不管頁面有多少，CSS文件可以控制的非常小，而且高性能，同時頁面擴展性也非常好。但要是門戶型，就不適用了。那么就需要一個拆分，也就是架構了。

　　1、CSS重置庫

　　2、通用樣式庫

　　3、公共樣式庫

　　4、布局樣式庫

　　5、按鈕、圖標、表單庫

　　6、模塊庫

　　7、私有庫

　　5.1 CSS重置庫

說到這個，從最初級是不定義，到*{ 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; }