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

    1 寫(xiě)在前面的

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

　　2 整體闡述

　　當(dāng)你是一個(gè)從業(yè)多年的WEB前端人員，或是開(kāi)發(fā)過(guò)大量的頁(yè)面，就會(huì)發(fā)現(xiàn)一個(gè)現(xiàn)象，即使不是同一個(gè)網(wǎng)站，所定義的CSS中也很多相同的類，當(dāng)然，不是同一網(wǎng)站沒(méi)法合并，倘若是同一個(gè)網(wǎng)站，每個(gè)頻道，或是一個(gè)頻道的每個(gè)頁(yè)面要都是一套CSS樣式，是不是太浪費(fèi)了。那么是不是該把這CSS掰開(kāi)、揉碎好好的說(shuō)道說(shuō)道。CSS架構(gòu)，這個(gè)學(xué)術(shù)性的名稱就被我引用了。

　　在討論整個(gè)CSS架構(gòu)前，我想先來(lái)說(shuō)說(shuō)CSS本身。眾所周知，CSS的誕生，就是樣式與結(jié)構(gòu)的分離，就代表著精簡(jiǎn)與重用。

　　在多年前，人們開(kāi)發(fā)網(wǎng)站是，樣式都是寫(xiě)在html代碼中，維護(hù)起來(lái)那個(gè)繁瑣是不言而喻的，有了CSS后，當(dāng)需要定義一個(gè)字體顏色時(shí)，就可以：.red { color: #F00; } 頁(yè)面中凡需要字體為紅色時(shí)，都可以引用，修改起來(lái)也就是一步的事情。同時(shí)解放了html代碼。

　　可隨著網(wǎng)站內(nèi)容日益豐富，我們已經(jīng)不能單單只停留在初級(jí)的樣式與結(jié)構(gòu)的分離層面。需要對(duì)CSS進(jìn)行解剖，因?yàn)橹挥猩顚哟蔚牧私馑拍芨玫鸟{馭。

　　在對(duì)CSS處理的問(wèn)題上，各個(gè)網(wǎng)站的做法都不盡相同。有整個(gè)站點(diǎn)就一個(gè)CSS文件的，一般符合web2.0標(biāo)準(zhǔn)的，如開(kāi)心網(wǎng)；有分為頁(yè)眉，頁(yè)腳，主體不同部分的；有按個(gè)頻道頁(yè)面建立樣式的；亦有幾個(gè)公共樣式表，其余視不同頁(yè)面建立的。更有所有CSS都放在頁(yè)面head中的。

　　所有這些，并無(wú)正確錯(cuò)誤之分，只有是否適合，畢竟一切做法為的都是更為高效簡(jiǎn)潔的代碼。

　　這里我想說(shuō)說(shuō)自己的做法。一個(gè)站點(diǎn)CSS文件分為：CSS重置庫(kù)；通用樣式庫(kù)；公共樣式庫(kù)；布局樣式庫(kù)；按鈕、圖標(biāo)、表單庫(kù)；模塊庫(kù)；私有庫(kù)。

　　除了最后一個(gè)，其余都是公共的庫(kù)。這樣做雖然是單個(gè)頁(yè)面的連接數(shù)有所增加，但是對(duì)于門(mén)戶型網(wǎng)站，其整體的開(kāi)發(fā)成本會(huì)有大大的降低。不過(guò)實(shí)現(xiàn)這種開(kāi)發(fā)模式有幾個(gè)前提，樣式分離；樣式合并；前后臺(tái)通力合作。

　　3 CSS樣式分離3.1 CSS分離

　　前面提到過(guò)當(dāng)一個(gè)頁(yè)面需要一個(gè)紅色的樣式時(shí)，定義.red { color: #F00; }，然后引用就可以了，而這里說(shuō)的CSS分離，是一個(gè)個(gè)不同的CSS文件，由多個(gè)不同的頁(yè)面引用，如一個(gè)網(wǎng)站的head樣式單獨(dú)一個(gè)文件每個(gè)頁(yè)面都引用。不過(guò)，這種做法大家都知道，我也不會(huì)單單的說(shuō)這點(diǎn)，這里想說(shuō)的CSS重用的概念。

　　人們都知道錢(qián)幣只有1元、5元、10元，以前還有2元，但是不會(huì)出現(xiàn)，4、6、7等等，因?yàn)橥ㄟ^(guò)前面幾個(gè)就可以組合使用了。這個(gè)道理很簡(jiǎn)單。那么我們是不是也可以把CSS的屬性拆開(kāi)。這樣每當(dāng)需要哪些就引用什么。

　　如<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個(gè)類有兩個(gè)屬于通用類(.fr和.fwn)，屬性是沒(méi)有變量的，當(dāng)需要右浮動(dòng)和非粗體時(shí)就用此兩個(gè)類。而像此種類別的還有不少，在此列出我平時(shí)使用的。

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

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