互聯(lián)網(wǎng)上有許多通用的方案，這里我著重提三點(diǎn)：

1.模塊化CSS，提高代碼重用 我們知道，一個(gè)成熟的網(wǎng)站需要有統(tǒng)一的風(fēng)格，一致的用戶體驗(yàn)，比如：網(wǎng)站的配色，字體的大小，交互行為一致等應(yīng)該在設(shè)計(jì)之初就得到確定，而不是由個(gè)體開(kāi)發(fā)者來(lái)自由的定義。網(wǎng)站同時(shí)應(yīng)存在可以提取出來(lái)公用的樣式部分（如人人網(wǎng)中個(gè)人主頁(yè)右側(cè)的”最近來(lái)訪“，”推薦“等處的容器和標(biāo)題都是相同的展示效果）。那么我們就可以把網(wǎng)站的字體大小，公共控制，共用模塊的樣式都抽離出來(lái)，作為單獨(dú)的模塊來(lái)處理。這樣，團(tuán)隊(duì)中的每個(gè)人如果需要這樣的樣式，都可以用這種公共樣式，以此提高代碼的重用率。 我認(rèn)為一個(gè)項(xiàng)目的CSS可以拆分成2部分：公共CSS和業(yè)務(wù)CSS。我們?cè)陧?xiàng)目中抽出的這部分可以模塊化的CSS就可以歸類為公共CSS。這部分的代碼命名不應(yīng)涉及到具體的業(yè)務(wù)，只應(yīng)對(duì)其在模塊中負(fù)責(zé)的具體邏輯負(fù)責(zé)。

對(duì)于業(yè)務(wù)CSS，我們需要有統(tǒng)一的命名。如一個(gè)網(wǎng)站中有如下幾個(gè)欄目：文件，社區(qū)，社交關(guān)系等，在項(xiàng)目規(guī)劃時(shí)，就需要把這塊模塊的名稱定好，比如 文件-files,社區(qū)-cmty(community簡(jiǎn)寫(xiě))，這樣開(kāi)發(fā)人員在寫(xiě)樣式時(shí)，就可以使用公用的前綴，.cmty-cmtydetail，而不會(huì)根據(jù)各自的想法，寫(xiě)成.community或是.commu，這一點(diǎn)對(duì)于統(tǒng)一風(fēng)格是盡為重要的，也方便備用人員接手工作。

關(guān)于這方面，可以看看網(wǎng)上關(guān)于 面向?qū)ο蟮腃SS / OOCSS

2.CSS合并、壓縮 顧名思義，在團(tuán)隊(duì)開(kāi)發(fā)中，開(kāi)發(fā)者會(huì)分別處理各自單元的樣式，網(wǎng)站上線了，為了減少http連接數(shù)，我們需要把這些CSS合并起來(lái)做為一個(gè)文件來(lái)加載，同時(shí)，我們?cè)陂_(kāi)發(fā)時(shí)可能會(huì)加入一些注釋和行縮進(jìn)，這些都會(huì)浪費(fèi)我們的帶寬，我們需要把合并后的CSS文件再進(jìn)行壓縮，事實(shí)上，這樣的優(yōu)化效果也是十分明顯的，文件大小會(huì)節(jié)約至少20%。 目前互聯(lián)網(wǎng)上對(duì)CSS合并的處理有兩種：靜態(tài)合并和動(dòng)態(tài)合并。靜態(tài)合并是指在網(wǎng)站部署上線前，已經(jīng)完成了CSS的合并，并生成一個(gè)靜態(tài)文件，動(dòng)態(tài)合并是配合后端文件而實(shí)現(xiàn)的合并，既請(qǐng)求CSS時(shí)，把需要合并的所有CSS名稱做為參數(shù)，傳給一個(gè)后端文件（asp,php,aspx等），由該后端文件動(dòng)態(tài)的生成合并后的樣式并輸出。兩種方案各有利弊。

我在這里想表達(dá)的是，我們?cè)陧?xiàng)目中應(yīng)根據(jù)項(xiàng)目的類型，應(yīng)用不同的合并方案，門戶型網(wǎng)站對(duì)首次加載速度要求較高，我們并不需要合并所有的CSS進(jìn)來(lái)，而社區(qū)型的網(wǎng)站，用戶需要登錄才可以訪問(wèn)，那么就可以利用用戶輸入的時(shí)間加載所有的CSS進(jìn)來(lái)，在以后的訪問(wèn)中都可以省去CSS請(qǐng)求的時(shí)間。

3.統(tǒng)一CSS書(shū)寫(xiě)規(guī)范 好處是不言而喻的，無(wú)論是后臺(tái)前臺(tái)，統(tǒng)一的代碼規(guī)范是必須的。1.一律使用小字字母2.盡量使用ShortHand形式,在font,margin,padding,background中3.處理父子關(guān)系的節(jié)點(diǎn)時(shí)，使用 .parent-child-grandson（大多時(shí)候parent名稱與具體業(yè)務(wù)的模塊名稱相關(guān)） 寫(xiě)法 ，而不使用 .parent .child .grandson，事實(shí)證明后者在在團(tuán)隊(duì)開(kāi)發(fā)中更容易造成模塊間的樣式覆蓋，同時(shí)也更不易于閱讀。一個(gè)簡(jiǎn)單的例子：在模塊一中有一列表，用第二種寫(xiě)法大致如下：.informationlist{}.informationlist .listitem{}而同時(shí)，在模塊二中也存在一列表，開(kāi)發(fā)者正好也用到了.listitem，而且認(rèn)為這個(gè)命名不常見(jiàn)，前面沒(méi)有加上限定，直接使用了.listitem ，這樣就極容易造成了樣式?jīng)_突。或許您提出不同意見(jiàn)：我們強(qiáng)制讓所有的樣式前面都加一個(gè)關(guān)于其模塊名的限定，把模塊二中的.listitem改成 .module2 .listitem，不就ok了？但這樣并不好，因?yàn)樵趯?shí)際應(yīng)用中，不能要求所有的樣式寫(xiě)法一定要加上模塊限定，比如在body節(jié)點(diǎn)下的某個(gè)浮動(dòng)節(jié)點(diǎn)，我們就不能這樣處理。同時(shí)，針對(duì)第一種寫(xiě)法，我們還可以很輕松開(kāi)發(fā)出一個(gè)CSS的檢測(cè)軟件，用來(lái)檢測(cè)語(yǔ)法，判斷覆蓋。（我們知道判斷出.a .b, .a>b,.b的覆蓋關(guān)系遠(yuǎn)比.a-b復(fù)雜的多）

更多信息請(qǐng)查看IT技術(shù)專欄