1 寫(xiě)在(zài)前麵(miàn)的(dí)
以下內容是平(píng)時工作中(zhōng)所積累形成的(dí)，其中(zhōng)不(bù)乏帶有個人感(gǎn)情色(sè)彩(cǎi)。在此隻(zhī)是闡(chǎn)述(shù)及(jí)歸納(nà)。
2 整體闡(chǎn)述(shù)
當你(nǐ)是(shì)一個從業多(duō)年的WEB前端(duān)人員，或是(shì)開(kāi)發過(guò)大量的頁(yè)麵(miàn)，就會(huì)發現(xiàn)一個(gè)現(xiàn)象，即(jí)使不是同一(yī)個網(wǎng)站(zhàn)，所(suǒ)定(dìng)義的(dí)CSS中(zhōng)也(yě)很多相(xiāng)同的(dí)類，當然(rán)，不(bù)是同(tóng)一網(wǎng)站(zhàn)沒(méi)法(fǎ)合(hé)並，倘若是同(tóng)一(yī)個網(wǎng)站，每個(gè)頻道，或是一個頻(pín)道的每個頁麵要都是(shì)一套CSS樣(yàng)式(shì)，是不(bù)是太浪(làng)費(fèi)了。那(nà)麼是(shì)不是該把這(zhè)CSS掰(bāi)開(kāi)，揉碎好(hǎo)好的(dí)說道說道(dào)。CSS架構，這(zhè)個學術性的(dí)名稱(chēng)就被(bèi)我引用了(liǎo)。
在(zài)討(tǎo)論(lùn)整個CSS架構(gòu)前，我想先(xiān)來說說(shuō)CSS本身。眾(zhòng)所周知，CSS的(dí)誕(dàn)生，就是樣(yàng)式與(yǔ)結(jié)構(gòu)的(dí)分(fēn)離，就代表(biǎo)著精簡與(yǔ)重用。
在(zài)多(duō)年前，人們開(kāi)發網站(zhàn)是，樣式都(dū)是寫在html代碼(mǎ)中(zhōng)，維(wéi)護(hù)起來(lái)那個(gè)繁(fán)瑣(suǒ)是不言(yán)而喻的(dí)，有了CSS後(hòu)，當需要定(dìng)義一(yī)個字體(tǐ)顏(yán)色(sè)時，就可以(yǐ)：.red { color: #F00; } 頁(yè)麵中凡(fán)需(xū)要字(zì)體(tǐ)為紅色(sè)時(shí)，都(dū)可以引用(yòng)，修改起(qǐ)來也(yě)就是(shì)一步的(dí)事情。同時解(jiě)放了html代碼。
可隨著(zhuó)網(wǎng)站(zhàn)內(nèi)容日益豐富，我們已經不能(néng)單單隻(zhī)停(tíng)留(liú)在(zài)初級的樣(yàng)式與(yǔ)結構(gòu)的(dí)分(fēn)離層麵(miàn)。需要(yào)對CSS進行解剖，因為隻有深層次(cì)的了(liǎo)解它，才能(néng)更(gēng)好的駕(jià)馭。
在對CSS處理(lǐ)的問題上，各(gè)個網站(zhàn)的做法(fǎ)都不盡相(xiāng)同。有整個站點(diǎn)就一(yī)個CSS文(wén)件的，一(yī)般(bān)符(fú)合(hé)web2.0標(biāo)準的，如(rú)開心(xīn)網(wǎng)；有分為頁眉(méi)，頁(yè)腳，主體不同部(bù)分(fēn)的；有(yǒu)按個頻道(dào)頁麵(miàn)建立樣(yàng)式(shì)的；亦(yì)有(yǒu)幾(jī)個公共(gòng)樣(yàng)式(shì)表(biǎo)，其餘視(shì)不(bù)同頁(yè)麵(miàn)建立(lì)的。更有(yǒu)所有CSS都(dū)放在頁麵head中(zhōng)的。
所(suǒ)有這(zhè)些，並(bìng)無(wú)正確錯(cuò)誤之分(fēn)，隻有是(shì)否適合(hé)，畢(bì)竟一(yī)切(qiē)做(zuò)法為(wéi)的(dí)都(dū)是更(gēng)為高效(xiào)簡(jiǎn)潔的代(dài)碼(mǎ)。
這裏(lǐ)我想說說自(zì)己的(dí)做(zuò)法(fǎ)。一個站(zhàn)點(diǎn)CSS文件分(fēn)為(wéi)：CSS重(zhòng)置庫；通用(yòng)樣式庫；公(gōng)共(gòng)樣式庫(kù)；布(bù)局樣式(shì)庫；按(àn)鈕(niǔ)，圖標(biāo)，表(biǎo)單(dān)庫(kù)；模塊(kuài)庫；私有庫(kù)。
除(chú)了最後(hòu)一(yī)個，其(qí)餘(yú)都是(shì)公(gōng)共(gòng)的庫。這(zhè)樣做雖然是單個頁(yè)麵的連(lián)接數(shù)有所增加，但是(shì)對於(yú)門(mén)戶型(xíng)網站，其整體(tǐ)的(dí)開(kāi)發成(chéng)本(běn)會(huì)有(yǒu)大(dà)大的(dí)降(jiàng)低。不過實(shí)現這(zhè)種開發模式(shì)有(yǒu)幾個前(qián)提，樣(yàng)式分(fēn)離；樣(yàng)式(shì)合並(bìng)；前(qián)後台通力(lì)合作(zuò)。
3 CSS樣(yàng)式(shì)分離(lí)3.1 CSS分離
前麵提到(dào)過當一個頁麵需要(yào)一(yī)個紅色的樣(yàng)式時(shí)，定義.red { color: #F00; }，然後引用(yòng)就可以了，而(ér)這裏說(shuō)的CSS分(fēn)離(lí)，是(shì)一個個(gè)不(bù)同(tóng)的CSS文件，由多個(gè)不(bù)同的頁(yè)麵引用，如一個網(wǎng)站(zhàn)的head樣(yàng)式單獨(dú)一(yī)個文件每(měi)個頁麵都引用(yòng)。不過，這種做法(fǎ)大家(jiā)都(dū)知道，我也(yě)不會(huì)單(dān)單的說(shuō)這點(diǎn)，這(zhè)裏(lǐ)想說(shuō)的(dí)CSS重用的(dí)概(gài)念。
人們(mén)都知道(dào)錢(qián)幣隻(zhī)有1元，5元，10元，以前還有(yǒu)2元，但(dàn)是不會出現(xiàn)，4，6，7等(děng)等(děng)，因為通(tōng)過(guò)前麵幾個(gè)就可以(yǐ)組(zǔ)合(hé)使用(yòng)了。這個道理(lǐ)很(hěn)簡單。那(nà)麼我們是不是也可以(yǐ)把CSS的屬性拆(chāi)開(kāi)。這樣每當需(xū)要哪(nǎ)些(xiē)就引用什(shí)麼。
如<span class=”more”>更(gēng)多</span>
.more { display: inline; float: right; margin-right: 10px; color: #F00; font-weight: normal; }
而拆分後(hòu)，
<div class=”fr red fwn mr10”>更多</div>，樣(yàng)式(shì)為：
.fr { display: inline; float: right; }
.red { color: #F00; }
.fwn { font-weight: normal; }
.mr10 { margin-right: 10px; }
以上(shàng)4個類(lèi)有(yǒu)兩個(gè)屬於(yú)通(tōng)用類(.fr和(hé).fwn)，屬性是沒有變量(liáng)的，當(dāng)需(xū)要右(yòu)浮動和非粗(cū)體時就(jiù)用(yòng)此(cǐ)兩個類(lèi)。而(ér)像(xiàng)此(cǐ)種(zhǒng)類別的還有不少，在(zài)此(cǐ)列(liè)出我(wǒ)平時使用的(dí)。
.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; }
這(zhè)樣(yàng)需要上述的(dí)效(xiào)果(guǒ)時，就可(kě)以自由(yóu)組合的(dí)了(liǎo)。樣式拆分(fēn)，有助於精簡CSS文件。每個(gè)CSS樣(yàng)式的重用性都發(fā)揮(huī)到極(jí)致。後(hòu)期維護(hù)也會輕鬆(sōng)多。同時，除了(liǎo)這(zhè)些(xiē)類以(yǐ)外，還(huán)有顏(yán)色(sè)，外(wài)邊距(jù)，內間距，這些(xiē)也(yě)是可以(yǐ)單(dān)獨定義出來(lái)的(dí)，隻是它(tā)們的值是變量的。如(rú)之(zhī)前的.mr10 { margin-right: 10px; }
說了這(zhè)些(xiē)，不(bù)難發(fā)現(xiàn)，CSS樣式(shì)越是分(fēn)離，就(jiù)可(kě)以(yǐ)使(shǐ)每個類(lèi)重用性發揮到極(jí)最大化(huà)，CSS代(dài)碼(mǎ)就越(yuè)精簡！不過(guò)凡事都不是(shì)絕對的，所謂此消彼(bǐ)長，當CSS樣式分離(lí)的(dí)多(duō)了，自然html的(dí)代碼就會(huì)增加。如(rú)：tab選(xuǎn)項卡，每個(gè)的寬度(dù)是(shì)自適應的，還有(yǒu)定位的(dí)出(chū)現，那(nà)麼html的代碼就誇張(zhāng)了(liǎo)，且繁(fán)瑣，不(bù)易(yì)維護(hù)。這(zhè)時(shí)我們(mén)就(jiù)不(bù)能(néng)隻有(yǒu)CSS分(fēn)離(lí)了(liǎo)；又如一組(zǔ)展示商品頁，所(suǒ)有的li左浮動(dòng)，若(ruò)在(zài)每處(chǔ)加上的話，顯然不合(hé)適。從而，並非(fēi)是所有(yǒu)的地(dì)方都(dū)適合使用(yòng)分(fēn)離(lí)獨立(lì)的樣(yàng)式。從而(ér)需要權衡，而具(jù)體(tǐ)該(gāi)怎麼做(zuò)，如何權(quán)衡？說(shuō)的(dí)玄(xuán)乎點，憑經驗，其(qí)實，這確實是(shì)一(yī)個憑借經(jīng)驗來(lái)判斷的。
3.2 設(shè)計師(shī)的(dí)配(pèi)合
不管設計師(shī)與前端開發是否(fǒu)是一(yī)人，要(yào)想使(shǐ)樣(yàng)式(shì)的分(fēn)離功(gōng)效(xiào)最大(dà)化，設計(jì)師(shī)所(suǒ)扮演的角(jiǎo)色至(zhì)關重要。
比(bǐ)如區塊(kuài)間的間(jiān)距(jù)，有10像(xiàng)素，15像素，12像素，邊框(kuàng)一處是#DADADA，一處又是(shì)#D4D4D4D等，那(nà)麼(mó)獨立出的類重(zhòng)用性就大(dà)打(dǎ)折(zhē)扣。
設(shè)計(jì)師在(zài)設(shè)計頁麵時，也(yě)該有(yǒu)如後台開發人員(yuán)一樣的(dí)模塊意(yì)識(shí)，有時不能為了一處(chǔ)的效(xiào)果好看些，就獨立一處(chǔ)的(dí)設計(jì)。當(dāng)然(rán)，物極(jí)必反，不能全部(bù)都統(tǒng)一風格，還(huán)是有精(jīng)細之處。
3.3 前端工(gōng)程(chéng)師(shī)的(dí)功力
之所(suǒ)以要(yào)分離(lí)CSS，其目(mù)的(dí)為(wéi)的(dí)是精(jīng)簡網站的CSS文(wén)件(jiàn)，倘(tǎng)若(ruò)執行者的水(shuǐ)平(píng)，也(yě)就是功(gōng)力(lì)不夠(gòu)，那麼在(zài)分離的(dí)同(tóng)時，亦會增加更多的(dí)CSS代碼，如(rú)：不(bù)能很好的(dí)使用最簡單(dān)的(dí)代(dài)碼(mǎ)實現(xiàn)兼容(róng)的效果，使用了過(guò)多(duō)的hack等，反而枉(wǎng)然。從(cóng)而對CSS理(lǐ)解(jiě)透徹，對整(zhěng)站(zhàn)CSS進行(háng)架構及對分(fēn)離(lí)權(quán)衡，至(zhì)關重(zhòng)要。
4 CSS樣式合並
說完分(fēn)離，下麵來說合(hé)並，似乎這兩者(zhě)有衝突，實(shí)際(jì)，目的是(shì)一致(zhì)的(dí)，都是為(wéi)了(liǎo)使CSS精(jīng)簡。
CSS樣(yàng)式(shì)合(hé)並(bìng)，就(jiù)是對(duì)一些不(bù)能分(fēn)離(lí)的(dí)樣式(shì)，如(rú)背景(jǐng)圖(tú)片(piàn)，將公共的部分合並，非(fēi)公(gōng)共的部分分離(lí)獨(dú)立(lì)出來，我(wǒ)常用(yòng)的是(shì)應對於 CSS Sprites,看(kàn)下圖(tú)
微(wēi)博(bó)頁麵(miàn)中對背(bèi)景圖樣(yàng)式進(jìn)行了(liǎo)合(hé)並(bìng)，倘若(ruò)不(bù)這樣(yàng)，那增加(jiā)的(dí)CSS代碼量(liáng)就(jiù)驚(jīng)人(rén)了。當然(rán)這(zhè)種做法(fǎ)，是普通(tōng)的，也(yě)是(shì)大家使用(yòng)最多的。這裏想(xiǎng)說說另(lìng)外一種(zhǒng)樣(yàng)式合(hé)並(bìng)。我稱它為(wéi)“組合(hé)式”樣式。
4.1 CSS分離與(yǔ)合(hé)並(bìng)（組合）
這一(yī)觀點，也(yě)是(shì)我(wǒ)使用(yòng)了樣式分離(lí)後，慢慢的(dí)在項(xiàng)目中發現的(dí)。之前說(shuō)到了CSS通(tōng)用庫，它(tā)就(jiù)似“孫悟空(kōng)”，跳出三(sān)界(jiè)外，不在(zài)五(wǔ)行(háng)中。通(tōng)用類的(dí)屬(shǔ)性(xìng)都是CSS所固有的(dí)，非(fēi)變量的。而還有(yǒu)一些分離出(chū)來的(dí)類，原先(xiān)我(wǒ)也是(shì)放在(zài)通用庫中(zhōng)，如(rú)mt10: margin-top:10px; cor_1: #666;而現在(zài)我把(bǎ)它(tā)分(fēn)離出通(tōng)用(yòng)庫，稱之為基(jī)本(běn)樣式(shì)庫。
分離(lí)一(yī)般(bān)使用在那些(xiē)非模(mó)塊化(huà)的元(yuán)素(sù)，這裏(lǐ)說的合並就(jiù)該(gāi)是應用(yòng)於(yú)模塊(kuài)化的(dí)元素(sù)。這(zhè)裏(lǐ)先跑下(xià)題(tí)，解(jiě)釋下模(mó)塊化(huà)元素。其實是我沒(méi)說清(qīng)楚，我說(shuō)的模塊(kuài)不(bù)是通常意義上如網(wǎng)站頁(yè)眉，頁腳(jiǎo)等，而(ér)是頁(yè)麵中的一(yī)個(gè)特(tè)定(dìng)區(qū)塊(kuài)，如(rú)按鈕(niǔ)，文本框，全站公(gōng)用圖(tú)標(biāo)，這些模(mó)塊是(shì)不宜使(shǐ)用樣式分(fēn)離的。
舉(jǔ)個(gè)例(lì)子(zǐ)：
這(zhè)裏我想再(zài)引入一(yī)個(gè)概(gài)念柵(zhà)格化布局(jú)，具體(tǐ)什麼不(bù)多說，隻是因為這(zhè)是(shì)個前提(tí)，我通常(cháng)采用(yòng)的是24欄(lán)寬(kuān)度950的(dí)布(bù)局。說這個是解釋(shì)後麵舉例中這些數(shù)值(zhí)的來歷(lì)。
在定(dìng)義(yì)獨(dú)立的(dí)樣(yàng)式時，會(huì)定義大量乘40減(jiǎn)10的(dí)寬(kuān)度值，如(rú)230,190.270，510等，
.w1 { width: 230px; }
.w2 { width: 190px; }
.w3 { width: 270px; }
那麼(mó)當有(yǒu)一個(gè)層寬(kuān)度(dù)剛好是(shì)230時，<div class=”w1”></div>
這(zhè)個看似(sì)完(wán)美，其實隱患很多。後(hòu)期(qī)一旦某(mǒu)一(yī)天要(yào)改變寬度，230改成(chéng)240，單改(gǎi)w1的(dí)類(lèi)，那麼(mó)所有引用它(tā)的(dí)都會(huì)變，顯然不行。怎(zěn)麼辦，以(yǐ)前我的(dí)做法是，找(zhǎo)這(zhè)個div父(fù)層(céng)中(zhōng)的類，比如可(kě)能是在(zài)main層下(xià)麵，那(nà)就(jiù)再(zài)加個樣(yàng)式(shì)
.mian w1 { width: 240px; }
可是也(yě)可(kě)能main下(xià)有幾(jī)個層都(dū)用到(dào)了w1，而隻能改一(yī)個。怎(zěn)麼(mó)辦，放(fàng)在(zài)以(yǐ)前我會單獨(dú)的給這個(gè)層(céng)命(mìng)名，如(rú)side，然後單獨定(dìng)義寬度(dù)。其實這(zhè)種做法離我要(yào)表達(dá)的合(hé)並的(dí)概念(niàn)很(hěn)近了。而現在(zài)我(wǒ)同樣(yàng)是給(gěi)這(zhè)個層命名side，但是(shì)不去(qù)定義它的寬度(dù)，而(ér)是直接<div class=”side w1”></div>
這樣，在(zài)沒(méi)有(yǒu)更(gēng)改(gǎi)的情況(kuàng)下，它依然(rán)是寬度(dù)230，而(ér)當(dāng)有(yǒu)變化(huà)時(shí)。定義.side{width: 240px; } 因為基本(běn)樣式(shì)庫(kù)在(zài)頁(yè)麵引用(yòng)時(shí)在上麵(miàn)，而頁(yè)麵特(tè)有(yǒu)樣式在下(xià)麵，按照(zhào)CSS的(dí)權重，後(hòu)定義(yì)的權(quán)重大。這(zhè)樣做(zuò)，既保(bǎo)證(zhèng)了(liǎo)CSS樣(yàng)式分離，對於模(mó)塊化元素又解除了隱(yǐn)患，同(tóng)時使(shǐ)得這(zhè)個模(mó)塊有了語義(yì)化的名稱(chēng)。
5 CSS架(jià)構
在(zài)說(shuō)了這(zhè)些前(qián)提後(hòu)，就(jiù)可(kě)以(yǐ)來(lái)說說(shuō)我寫(xiě)本文(wén)的(dí)目(mù)的(dí)了，CSS的(dí)架構。
其實(shí)關於(yú)這點(diǎn)，前輩們(mén)又(yòu)很(hěn)多的做法，本文的開(kāi)頭(tóu)提過(guò)。對(duì)於(yú)符(fú)合web2.0的網站，我(wǒ)是(shì)隻(zhī)用一(yī)個(gè)CSS文件，因為(wéi)風格(gé)統(tǒng)一，不管頁(yè)麵有(yǒu)多少，CSS文(wén)件(jiàn)可(kě)以控(kòng)製的(dí)非常小，而且高(gāo)性(xìng)能，同時頁麵(miàn)擴(kuò)展性(xìng)也非(fēi)常好(hǎo)。但(dàn)要是門戶型，就不(bù)適用了。那麼就(jiù)需要(yào)一個拆分，也(yě)就是(shì)架(jià)構了。
1，CSS重置庫
2，通用(yòng)樣(yàng)式庫(kù)
3，公共樣式(shì)庫(kù)
4，布(bù)局樣式(shì)庫
5，按(àn)鈕，圖標(biāo)，表(biǎo)單(dān)庫
6，模塊(kuài)庫
7，私(sī)有庫
5.1 CSS重(zhòng)置庫
說到這(zhè)個，從最(zuì)初級是不(bù)定義，到*{ margin:0; padding:0 }一(yī)棒子打(dǎ)死(sǐ)，再(zài)到(dào)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; }
及(jí)現在的
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; }
同(tóng)時還會定(dìng)義(yì)一(yī)些輔助的
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; }
樣式(shì)重(zhòng)置(zhì)的目(mù)的(dí)是為了(liǎo)清除(chú)一些瀏覽(lǎn)器樣(yàng)式(shì)不統(tǒng)一(yī)的地方。
5.2 通(tōng)用樣(yàng)式(shì)庫(kù)
前(qián)麵(miàn)已經(jīng)展示(shì)，這裏(lǐ)隻說(shuō)說(shuō)命(mìng)名。這些(xiē)命名是(shì)我的(dí)習(xí)慣(guàn)，各位(wèi)可(kě)以(yǐ)根(gēn)據自己的(dí)命名標(biāo)準(zhǔn)。我(wǒ)一般(bān)使(shǐ)用屬(shǔ)性的(dí)首字(zì)母(mǔ)命(mìng)名。如float：left，那(nà)麼(mó)這個類就(jiù)用fl。同(tóng)理(lǐ).tdu 就代(dài)表(biǎo).tdu { text-decoration: underline; }。
5.3 公(gōng)共樣(yàng)式庫(kù)
這一塊(kuài)其(qí)實(shí)和(hé)通用(yòng)庫差(chà)不多，但是(shì)由於(yú)其定義(yì)的值為(wéi)變量。如(rú)外上(shàng)邊(biān)距10px
.mt10 { margin-top: 10px; }
內(nèi)下(xià)間距(jù)10px
.pb10 { padding-bottom: 10px; }
字體
.fa { font-family: Arial; }
大(dà)小
.fz14 { font-size: 14px; }
還有行(háng)高(gāo)，左右外(wài)邊距(jù)等(děng)等。
5.4 布局(jú)樣(yàng)式庫
這(zhè)裏麵(miàn)定(dìng)義一些(xiē)網站(zhàn)的公用版塊，頁腳，頁眉(méi) ，以及網站使用(yòng)的一(yī)些(xiē)常規(guī)布局(jú)。
還想在說說(shuō)柵格化布局。倘(tǎng)若使用了柵格(gé)化布(bù)局，那麼每(měi)個版塊(kuài)的(dí)寬度就是(shì)一(yī)定範圍(wéi)且(qiě)是有(yǒu)規律的(dí)值。那麼就(jiù)可以(yǐ)在(zài)這(zhè)裏(lǐ)定義一係列寬度(dù)值(zhí)了(liǎo)。這(zhè)裏隻是強調，至於柵格(gé)化布局的始(shǐ)末(mò)，我會單獨說明(míng)。
5.5 按鈕(niǔ)，圖(tú)標，表單(dān)庫
對(duì)於(yú)網站的(dí)圖標，可以集(jí)中到(dào)一張(zhāng)圖上，當(dāng)然(rán)這些圖標是使用率高的(dí)，各頻(pín)道都會(huì)使(shǐ)用的。做(zuò)法(fǎ)可(kě)以參(cān)照(zhào)之前說的CSS Sprites。
當若(ruò)不是BS結構的(dí)頁麵。表(biǎo)單(dān)，按(àn)鈕等(děng)也會(huì)不多(duō)，可(kě)以(yǐ)不單(dān)獨定義。
5.6 模塊(kuài)庫
收集網站的一(yī)些公用(yòng)的(dí)分頁(yè)，評(píng)論等(děng)，這(zhè)裏就需(xū)要設計，前端，後台通(tōng)力合(hé)作(zuò)，才(cái)能使模塊庫建立起來(lái)。
5.7 私有庫(kù)
聽這麼(mó)名(míng)字就知(zhī)道(dào)，是頁(yè)麵(miàn)所(suǒ)特(tè)有的樣(yàng)式。屬於微(wēi)調。也(yě)就是一個(gè)頁麵加載上(shàng)述庫之(zhī)後(hòu)需要完(wán)成(chéng)的。我相信前麵(miàn)的(dí)工作(zuò)完成(chéng)後(hòu)，這塊就(jiù)是小工(gōng)作(zuò)了(liǎo)。同時(shí)，之前所說(shuō)的分離(lí)，有(yǒu)些地方(fāng)不(bù)適合(hé)使(shǐ)用分(fēn)離(lí)樣式(shì)時(shí)，那就(jiù)需要(yào)在(zài)每個(gè)頁麵的私有(yǒu)庫裏定(dìng)義。
6 最後想說的(dí)
這一設想的完(wán)成(chéng)，最重要(yào)的還是反復強(qiáng)調(tiáo)的(dí)各人(rén)員(yuán)間(jiān)的合作。第(dì)二(èr)點(diǎn)，也就(jiù)是前端的水(shuǐ)平，倘若CSS理(lǐ)解(jiě)不透(tòu)徹，對(duì)樣式(shì)分(fēn)離把握不嫻熟也(yě)是(shì)很(hěn)難達到理(lǐ)想效果的(dí)。
其實我現(xiàn)在的水平(píng)還(huán)是有(yǒu)限的，上升的(dí)空間(jiān)還很大。同時(shí)這(zhè)些觀點也是(shì)工作(zuò)中(zhōng)及(jí)在(zài)前人的(dí)肩(jiān)膀(bǎng)上總結慢慢(màn)形(xíng)成的。這些並(bìng)不是真(zhēn)理(lǐ)，其中不乏(fá)有錯(cuò)誤(wù)的(dí)地方。您在閱(yuè)讀後發(fā)現(xiàn)有(yǒu)不(bù)合(hé)理(lǐ)的地方，歡迎(yíng)指(zhǐ)出(chū)。
對於現(xiàn)在工作(zuò)想說的(dí)：我(wǒ)這(zhè)並不是(shì)說(shuō)這(zhè)套模式就(jiù)應該到現(xiàn)在網站開發(fā)中，因為開發(fā)模式的(dí)改(gǎi)版，意(yì)味著變革，變(biàn)革這東(dōng)西，向來(lái)阻(zǔ)力(lì)大(dà)。且不見(jiàn)得就(jiù)是(shì)對的。而(ér)我現(xiàn)在在工作中，其(qí)實已經(jīng)使用了CSS分離 及(jí)合(hé)並(bìng)的方(fāng)法，對(duì)工作(zuò)效(xiào)率的提升，自己有(yǒu)切(qiē)身(shēn)的感(gǎn)受(shòu)到，隻是沒(méi)有(yǒu)應用(yòng)單獨(dú)庫(kù)的(dí)概(gài)念(niàn)。樣(yàng)式中(zhōng)，通用庫(kù)，公共庫，重置等都是在一(yī)個(gè)頁(yè)麵中。
而(ér)一旦(dàn)使(shǐ)用這(zhè)套模式，在前期，怎樣建立好(hǎo)這套(tào)樣式(shì)庫，還是需費(fèi)一些(xiē)精(jīng)力(lì)的(dí)。
這裏是對(duì)平(píng)時工作中一(yī)些零散理論(lùn)，技巧(qiǎo)的一(yī)個總結，由於文字功(gōng)力(lì)的(dí)限製，會(huì)有(yǒu)表達不當之處(chǔ)。
轉(zhuǎn)載請(qǐng)保(bǎo)留原文(wén)地(dì)址(zhǐ): https://antelcom.cn/show-310.html