|
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)的分離,，就代表著精簡(jiǎn)與重用,。 在多年前，人們開發(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ò)誤之分,，只有是否適合,，畢竟一切做法為的都是更為高效簡(jiǎn)潔的代碼。 這里我想說說自己的做法,。一個(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è)道理很簡(jiǎn)單。那么我們是不是也可以把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í),，就可以自由組合的了,。樣式拆分，有助于精簡(jiǎn)CSS文件,。每個(gè)CSS樣式的重用性都發(fā)揮到極致,。后期維護(hù)也會(huì)輕松多。同時(shí),，除了這些類以外,，還有顏色,，外邊距，內(nèi)間距,，這些也是可以單獨(dú)定義出來的,，只是它們的值是變量的。如之前的.mr10 { margin-right: 10px; } 說了這些,，不難發(fā)現(xiàn),，CSS樣式越是分離，就可以使每個(gè)類重用性發(fā)揮到極最大化,，CSS代碼就越精簡(jiǎn),！不過凡事都不是絕對(duì)的，所謂此消彼長(zhǎng),，當(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，其目的為的是精簡(jiǎn)網(wǎng)站的CSS文件,，倘若執(zhí)行者的水平,，也就是功力不夠，那么在分離的同時(shí),，亦會(huì)增加更多的CSS代碼,，如：不能很好的使用最簡(jiǎn)單的代碼實(shí)現(xiàn)兼容的效果，使用了過多的hack等,，反而枉然,。從而對(duì)CSS理解透徹，對(duì)整站CSS進(jìn)行架構(gòu)及對(duì)分離權(quán)衡,，至關(guān)重要,。 4 CSS樣式合并 說完分離，下面來說合并,，似乎這兩者有沖突,，實(shí)際，目的是一致的,，都是為了使CSS精簡(jiǎn),。 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)榛緲邮綆煸陧撁嬉脮r(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; ; 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)有不合理的地方，歡迎指出,。 --------轉(zhuǎn)載
|
|
|
