淺析網站開發CSS架構

    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; }