1 寫在前面的

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

2 整體闡述

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

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

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

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

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

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

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

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

3 CSS樣式分離3.1 CSS分離

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

人們都知道錢幣只有1元、5元、10元，以前還有2元，但是不會(huì)出現(xiàn)，4、6、7等等，因?yàn)橥ㄟ^前面幾個(gè)就可以組合使用了。這個(gè)道理很簡單。那么我們是不是也可以把CSS的屬性拆開。這樣每當(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)，屬性是沒有變量的，當(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í)，就可以自由組合的了。樣式拆分，有助于精簡CSS文件。每個(gè)CSS樣式的重用性都發(fā)揮到極致。后期維護(hù)也會(huì)輕松多。同時(shí)，除了這些類以外，還有顏色，外邊距，內(nèi)間距，這些也是可以單獨(dú)定義出來的，只是它們的值是變量的。如之前的.mr10 { margin-right: 10px; }

說了這些，不難發(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)榛�本樣式庫在頁面引用時(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; }
及現(xiàn)在的

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

同時(shí)還會(huì)定義一些輔助的

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

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

5.2 通用樣式庫

前面已經(jīng)展示，這里只說說命名。這些命名是我的習(xí)慣，各位可以根據(jù)自己的命名標(biāo)準(zhǔn)。我一般使用屬性的首字母命名。如float：left，那么這個(gè)類就用fl。同理.tdu 就代表.tdu { text-decoration: underline; }。

5.3 公共樣式庫

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

.mt10 { margin-top: 10px; }

內(nèi)下間距10px

.pb10 { padding-bottom: 10px; }

字體

.fa { font-family: Arial; }

大小

.fz14 { font-size: 14px; }

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

5.4 布局樣式庫

這里面定義一些網(wǎng)站的公用版塊，頁腳、頁眉 ，以及網(wǎng)站使用的一些常規(guī)布局。

還想在說說柵格化布局。倘若使用了柵格化布局，那么每個(gè)版塊的寬度就是一定范圍且是有規(guī)律的值。那么就可以在這里定義一系列寬度值了。這里只是強(qiáng)調(diào)，至于柵格化布局的始末，我會(huì)單獨(dú)說明。

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

對(duì)于網(wǎng)站的圖標(biāo)，可以集中到一張圖上，當(dāng)然這些圖標(biāo)是使用率高的，各頻道都會(huì)使用的。做法可以參照之前說的CSS Sprites。

當(dāng)若不是BS結(jié)構(gòu)的頁面。表單，按鈕等也會(huì)不多，可以不單獨(dú)定義。

5.6 模塊庫

收集網(wǎng)站的一些公用的分頁、評(píng)論等，這里就需要設(shè)計(jì)、前端、后臺(tái)通力合作，才能使模塊庫建立起來。

5.7 私有庫

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

6 最后想說的

這一設(shè)想的完成，最重要的還是反復(fù)強(qiáng)調(diào)的各人員間的合作。第二點(diǎn)，也就是前端的水平，倘若CSS理解不透徹，對(duì)樣式分離把握不嫻熟也是很難達(dá)到理想效果的。

其實(shí)我現(xiàn)在的水平還是有限的，上升的空間還很大。同時(shí)這些觀點(diǎn)也是工作中及在前人的肩膀上總結(jié)慢慢形成的。這些并不是真理，其中不乏有錯(cuò)誤的地方。您在閱讀后發(fā)現(xiàn)有不合理的地方，歡迎指出。

對(duì)于現(xiàn)在工作想說的：我這并不是說這套模式就應(yīng)該到現(xiàn)在網(wǎng)站開發(fā)中，因?yàn)殚_發(fā)模式的改版，意味著變革，變革這東西，向來阻力大。且不見得就是對(duì)的。而我現(xiàn)在在工作中，其實(shí)已經(jīng)使用了CSS分離 及合并的方法，對(duì)工作效率的提升，自己有切身的感受到，只是沒有應(yīng)用單獨(dú)庫的概念。樣式中，通用庫，公共庫，重置等都是在一個(gè)頁面中。

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

這里是對(duì)平時(shí)工作中一些零散理論，技巧的一個(gè)總結(jié)，由于文字功力的限制，會(huì)有表達(dá)不當(dāng)之處。

轉(zhuǎn)載請(qǐng)保留原文地址: http://dchs1688.cn/show-310.html