1 寫在前面的

　　以下內容是平時工作中所積累形成的，其中不乏帶有個人感情色彩。在此只是闡述及歸納。

　　2 整體闡述

　　當你是一個從業多年的WEB前端人員，或是開發過大量的頁面，就會發現一個現象，即使不是同一個網站，所定義的CSS中也很多相同的類，當然，不是同一網站沒法合并，倘若是同一個網站，每個頻道，或是一個頻道的每個頁面要都是一套CSS樣式，是不是太浪費了。那么是不是該把這CSS掰開、揉碎好好的說道說道。CSS架構，這個學術性的名稱就被我引用了。

　　在討論整個CSS架構前，我想先來說說CSS本身。眾所周知，CSS的誕生，就是樣式與結構的分離，就代表著精簡與重用。

　　在多年前，人們開發網站是，樣式都是寫在html代碼中，維護起來那個繁瑣是不言而喻的，有了CSS后，當需要定義一個字體顏色時，就可以：.red { color: #F00; } 頁面中凡需要字體為紅色時，都可以引用，修改起來也就是一步的事情。同時解放了html代碼。

　　可隨著網站內容日益豐富，我們已經不能單單只停留在初級的樣式與結構的分離層面。需要對CSS進行解剖，因為只有深層次的了解它，才能更好的駕馭。

　　在對CSS處理的問題上，各個網站的做法都不盡相同。有整個站點就一個CSS文件的，一般符合web2.0標準的，如開心網；有分為頁眉，頁腳，主體不同部分的；有按個頻道頁面建立樣式的；亦有幾個公共樣式表，其余視不同頁面建立的。更有所有CSS都放在頁面head中的。

　　所有這些，并無正確錯誤之分，只有是否適合，畢竟一切做法為的都是更為高效簡潔的代碼。

　　這里我想說說自己的做法。一個站點CSS文件分為：CSS重置庫；通用樣式庫；公共樣式庫；布局樣式庫；按鈕、圖標、表單庫；模塊庫；私有庫。

　　除了最后一個，其余都是公共的庫。這樣做雖然是單個頁面的連接數有所增加，但是對于門戶型網站，其整體的開發成本會有大大的降低。不過實現這種開發模式有幾個前提，樣式分離；樣式合并；前后臺通力合作。

　　3 CSS樣式分離3.1 CSS分離

　　前面提到過當一個頁面需要一個紅色的樣式時，定義.red { color: #F00; }，然后引用就可以了，而這里說的CSS分離，是一個個不同的CSS文件，由多個不同的頁面引用，如一個網站的head樣式單獨一個文件每個頁面都引用。不過，這種做法大家都知道，我也不會單單的說這點，這里想說的CSS重用的概念。

　　人們都知道錢幣只有1元、5元、10元，以前還有2元，但是不會出現，4、6、7等等，因為通過前面幾個就可以組合使用了。這個道理很簡單。那么我們是不是也可以把CSS的屬性拆開。這樣每當需要哪些就引用什么。

　　如<span class=”more”>更多</span>

　　.more { display: inline; float: right; margin-right: 10px; color: #F00; font-weight: normal; }

　　而拆分后，

　　<div class=”fr red fwn mr10”>更多</div>，樣式為：

　　.fr { display: inline; float: right; }

　　.red { color: #F00; }

　　.fwn { font-weight: normal; }

　　.mr10 { margin-right: 10px; }

　　以上4個類有兩個屬于通用類(.fr和.fwn)，屬性是沒有變量的，當需要右浮動和非粗體時就用此兩個類。而像此種類別的還有不少，在此列出我平時使用的。

　　.fl { display: inline; float: left; }

　　.fr { display: inline; float: right; }

　　.db { display: block; }

　　.di { display: inline-block; }

　　.cl { clear: left; }

　　.cr { clear: right; }

　　.cb { clear: both; }

　　.fwb { font-weight: bolder; }

　　.fwn { font-weight: normal; }

　　.tdn { text-decoration:: none; }

　　.tdu { text-decoration: underline; }

　　.n1 { text-align: center; }

　　.n2 { text-align: left; }

　　.n3 { text-align: right; }

　　.vm { vertical-align: middle; }

　　.vt { vertical-align: top; }

　　.vb { vertical-align: bottom; }

　　.fa { font-family: Arial; }

　　.mo { font-family: "宋體" ; }

　　.fa1 { font-family: "黑體" ; }

　　.wsn { white-space: normal; }

　　.re { position: relative; }

　　.ov { overflow: hidden; zoom: 1; }

　　這樣需要上述的效果時，就可以自由組合的了。樣式拆分，有助于精簡CSS文件。每個CSS樣式的重用性都發揮到極致。后期維護也會輕松多。同時，除了這些類以外，還有顏色，外邊距，內間距，這些也是可以單獨定義出來的，只是它們的值是變量的。如之前的.mr10 { margin-right: 10px; }

　　說了這些，不難發現，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; }

　　及現在的

　　body, dl, dd, h1, h2, h3, h4, h5, h6, p, form, pre, textarea { margin: 0; }

　　ol, ul { margin: 0; padding: 0; }

　　td, th, input { padding: 0; }

　　同時還會定義一些輔助的

　　input,select,textarea,button { vertical-align: middle; border: none; background: #FFF; }

　　br { line-height: 0; font-size: 0; }

　　li{ list-style-type: none; }

　　img { vertical-align: top; border: 0; }

　　ul,ol { list-style: none; }

　　pre { text-align: center; white-spacere-wrap; word-wrap: break-word; }

　　em,i { font-weight: normal; font-style: normal; }

　　table { border-collapse: collapse; table-layout: fixed; width: 100%; }

　　td,th { word-wrap: break-word; word-break: break-all; overflow: hidden; }

　　樣式重置的目的是為了清除一些瀏覽器樣式不統一的地方。

　　5.2 通用樣式庫

　　前面已經展示，這里只說說命名。這些命名是我的習慣，各位可以根據自己的命名標準。我一般使用屬性的首字母命名。如float：left，那么這個類就用fl。同理.tdu 就代表.tdu { text-decoration: underline; }。

　　5.3 公共樣式庫

　　這一塊其實和通用庫差不多，但是由于其定義的值為變量。如外上邊距10px

　　.mt10 { margin-top: 10px; }

　　內下間距10px

　　.pb10 { padding-bottom: 10px; }

　　字體

　　.fa { font-family: Arial; }

　　大小

　　.fz14 { font-size: 14px; }

　　還有行高，左右外邊距等等。

　　5.4 布局樣式庫

　　這里面定義一些網站的公用版塊，頁腳、頁眉 ，以及網站使用的一些常規布局。

　　還想在說說柵格化布局。倘若使用了柵格化布局，那么每個版塊的寬度就是一定范圍且是有規律的值。那么就可以在這里定義一系列寬度值了。這里只是強調，至于柵格化布局的始末，我會單獨說明。

　　5.5 按鈕、圖標、表單庫

　　對于網站的圖標，可以集中到一張圖上，當然這些圖標是使用率高的，各頻道都會使用的。做法可以參照之前說的CSS Sprites。

　　當若不是BS結構的頁面。表單，按鈕等也會不多，可以不單獨定義。

　　5.6 模塊庫

　　收集網站的一些公用的分頁、評論等，這里就需要設計、前端、后臺通力合作，才能使模塊庫建立起來。

　　5.7 私有庫

　　聽這么名字就知道，是頁面所特有的樣式。屬于微調。也就是一個頁面加載上述庫之后需要完成的。我相信前面的工作完成后，這塊就是小工作了。同時，之前所說的分離，有些地方不適合使用分離樣式時，那就需要在每個頁面的私有庫里定義。

　　6 最后想說的

　　這一設想的完成，最重要的還是反復強調的各人員間的合作。第二點，也就是前端的水平，倘若CSS理解不透徹，對樣式分離把握不嫻熟也是很難達到理想效果的。

　　其實我現在的水平還是有限的，上升的空間還很大。同時這些觀點也是工作中及在前人的肩膀上總結慢慢形成的。這些并不是真理，其中不乏有錯誤的地方。您在閱讀后發現有不合理的地方，歡迎指出。

　　對于現在工作想說的：我這并不是說這套模式就應該到現在網站開發中，因為開發模式的改版，意味著變革，變革這東西，向來阻力大。且不見得就是對的。而我現在在工作中，其實已經使用了CSS分離 及合并的方法，對工作效率的提升，自己有切身的感受到，只是沒有應用單獨庫的概念。樣式中，通用庫，公共庫，重置等都是在一個頁面中。

　　而一旦使用這套模式，在前期，怎樣建立好這套樣式庫，還是需費一些精力的。

　　這里是對平時工作中一些零散理論，技巧的一個總結，由于文字功力的限制，會有表達不當之處。