域名注冊 網(wǎng)站制作
您現(xiàn)在的位置:首頁 >> 網(wǎng)站建設(shè) >> 內(nèi)容

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

時間:2014/10/11 10:12:35 點擊:267

摘要:1 寫在前面的 以下內(nèi)容是平時工作中所積累形成的,其中不乏帶有個人感情色彩。在此只是闡述及歸納。2 整體闡述 當(dāng)你是一個從業(yè)多年的WEB前端人員,或是開發(fā)過大量的頁面,就會發(fā)現(xiàn)一個現(xiàn)象,即使不是同...

1 寫在前面的

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

2 整體闡述

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

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

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

可隨著網(wǎng)站內(nèi)容日益豐富,我們已經(jīng)不能單單只停留在初級的樣式與結(jié)構(gòu)的分離層面。需要對CSS進行解剖,因為只有深層次的了解它,才能更好的駕馭。

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

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

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

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

3 CSS樣式分離3.1 CSS分離

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

人們都知道錢幣只有1元、5元、10元,以前還有2元,但是不會出現(xiàn),4、6、7等等,因為通過前面幾個就可以組合使用了。這個道理很簡單。那么我們是不是也可以把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個類有兩個屬于通用類(.fr和.fwn),屬性是沒有變量的,當(dāng)需要右浮動和非粗體時就用此兩個類。而像此種類別的還有不少,在此列出我平時使用的。

.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樣式的重用性都發(fā)揮到極致。后期維護也會輕松多。同時,除了這些類以外,還有顏色,外邊距,內(nèi)間距,這些也是可以單獨定義出來的,只是它們的值是變量的。如之前的.mr10 { margin-right: 10px; }

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

3.2 設(shè)計師的配合

不管設(shè)計師與前端開發(fā)是否是一人,要想使樣式的分離功效最大化,設(shè)計師所扮演的角色至關(guān)重要。

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

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

3.3 前端工程師的功力

之所以要分離CSS,其目的為的是精簡網(wǎng)站的CSS文件,倘若執(zhí)行者的水平,也就是功力不夠,那么在分離的同時,亦會增加更多的CSS代碼,如:不能很好的使用最簡單的代碼實現(xiàn)兼容的效果,使用了過多的hack等,反而枉然。從而對CSS理解透徹,對整站CSS進行架構(gòu)及對分離權(quán)衡,至關(guān)重要。

4 CSS樣式合并

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

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

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

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

4.1 CSS分離與合并(組合)

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

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

舉個例子:

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

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

.w1 { width: 230px; }

.w2 { width: 190px; }

.w3 { width: 270px; }

那么當(dāng)有一個層寬度剛好是230時,<div class=”w1”></div>

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

.mian w1 { width: 240px; }

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

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

5 CSS架構(gòu)

在說了這些前提后,就可以來說說我寫本文的目的了,CSS的架構(gòu)。

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

1、CSS重置庫

2、通用樣式庫

3、公共樣式庫

4、布局樣式庫

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

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; }
及現(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; }

同時還會定義一些輔助的

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,那么這個類就用fl。同理.tdu 就代表.tdu { text-decoration: underline; }。

5.3 公共樣式庫

這一塊其實和通用庫差不多,但是由于其定義的值為變量。如外上邊距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ī)布局。

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

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

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

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

5.6 模塊庫

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

5.7 私有庫

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

6 最后想說的

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

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

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

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

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

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

責(zé)編:王麗 作者:不詳 來源:網(wǎng)絡(luò)