CSS代碼命名規(guī)則與技巧探討

劉 偉

(山西青年職業(yè)學(xué)院，山西 太原 030032)

CSS代碼命名規(guī)則與技巧探討

劉 偉

(山西青年職業(yè)學(xué)院，山西 太原 030032)

合理、科學(xué)地對CSS代碼命名，能夠精簡CSS代碼，提高代碼的開發(fā)效率，方便網(wǎng)站設(shè)計師對網(wǎng)站進(jìn)行維護(hù)與修改.通過對CSS代碼命名規(guī)則分析，提出了進(jìn)行語義化命名、結(jié)構(gòu)化命名和慣例命名三種CSS代碼命名技巧.

CSS；命名；規(guī)則；技巧

1 合理進(jìn)行CSS代碼命名規(guī)范的意義

對于優(yōu)秀網(wǎng)站設(shè)計師而言，網(wǎng)站設(shè)計最重要的就是編寫出精簡、高效的CSS代碼.而合理、科學(xué)地對CSS代碼進(jìn)行命名，可以為整個網(wǎng)站的設(shè)計和維護(hù)工作起到事半功倍的效果，其重要意義主要有以下兩方面：1)可以縮短網(wǎng)站開發(fā)時間，提高網(wǎng)站設(shè)計效率.目前的網(wǎng)站設(shè)計早已由過去個人獨(dú)立完成的模式轉(zhuǎn)變?yōu)橛啥嗳藚f(xié)作開發(fā)的團(tuán)隊模式，隨著網(wǎng)站設(shè)計協(xié)作分工的細(xì)化，如果每個設(shè)計師仍然還是采用自己原有的一套CSS代碼命名規(guī)則，將會降低CSS代碼的可讀性，影響到團(tuán)隊其他成員對代碼的解讀，降低CSS的編碼效率，而合理進(jìn)行CSS代碼命名規(guī)范，能夠促進(jìn)所有網(wǎng)站設(shè)計師采用統(tǒng)一的CSS命名規(guī)范，有效縮短網(wǎng)站開發(fā)時間，提高網(wǎng)站設(shè)計效率.2)可以方便日后對網(wǎng)站進(jìn)行維護(hù)、修改與擴(kuò)展.網(wǎng)站開發(fā)好后，需要對網(wǎng)站進(jìn)行維護(hù)，按照客戶需求對網(wǎng)站進(jìn)行修改與擴(kuò)展.如果合理進(jìn)行CSS命名規(guī)范，將降低網(wǎng)站維護(hù)人員對網(wǎng)站的維護(hù)難度，方便網(wǎng)站其他設(shè)計師對網(wǎng)站進(jìn)行修改與功能擴(kuò)展.

2 CSS代碼命名規(guī)則

沒有規(guī)矩不成方圓，完全按照自己的想法行事，雖然沒有什么影響，但在團(tuán)隊合作完成項目的時候，就會遇到麻煩，要進(jìn)行修改、維護(hù)也相當(dāng)困難.因此，CSS命名規(guī)則應(yīng)該遵循一定規(guī)則，簡單地說就要求直觀、簡潔、一目了然，方便后期維護(hù)和交流.

2.1 借鑒程序語言命名方法

CSS雖然不是一門編程語言，但在很多方面可以借鑒編程思想和方法.在編程開發(fā)中，軟件工程師們經(jīng)過多年的實踐和研究積累形成了很多套比較成熟的命名方法，這些命名方法對于網(wǎng)頁設(shè)計師定義CSS名稱有著重要的指導(dǎo)作用.例如：匈牙利命名法、駱駝式命名法和帕斯卡命名法.

2.2 要區(qū)分大小寫

網(wǎng)頁設(shè)計師可以定義XHML屬性class 和id,在利用CSS代碼這兩個選擇符對網(wǎng)頁元素進(jìn)行精確控制.就HTML來說，對于字符大小寫是不敏感的，包括標(biāo)簽名稱和屬性，但CSS對于class和id選擇符名稱卻比較敏感.因此，書寫時要特別注意，一般建議設(shè)計師在命名時全部使用小寫字母，單詞首字母可以除外.

2.3 要注意合法性

編程語言中變量命名必須要合法，CSS代碼命名也一樣，一般要求名稱以字母開頭，后面可以連接數(shù)字、字母、下劃線、連字符和特殊字符，但建議盡量使用英文字母，需要時適當(dāng)使用下劃線和連接線.例如：

1)合法名稱

Style.css

topMenu

2)非法名稱

263_color

-my-site

2.4 要注意簡明扼要，詞必達(dá)意

CSS命名要詞必達(dá)意，名稱要反映用途和相關(guān)信息，同時也要簡要，不要附帶任何冗余信息.例如，myleftmenu120px就可以簡寫為myleftmenu.名稱可以縮寫，為了讓名稱盡量短，可以使用一些約定俗稱的縮寫.但要保證看的懂，如果不是大家都能夠看得懂的縮寫，盡量不用.名稱中可以包含多個單詞，為了方便識別這些詞，需要邏輯區(qū)分每個詞.我們可以使用駱駝式命名法、下劃線(或連接線法)或帕斯卡命名法，也可以多種方法混合使用.

3 CSS代碼命名技巧

Css代碼命名對于網(wǎng)頁設(shè)計和維護(hù)很重要，目前主要的CSS代碼命名主要包括三種：

3.1 語義化命名

當(dāng)在網(wǎng)頁設(shè)計中需要對元素進(jìn)行標(biāo)識命名時，最自然的做法就是使用可以描述元素所在位置的語義詞匯來對其命名，例如：

id=“l(fā)eft-side”

id=“center-column”

id=“right-column”

在上面代碼中，這3個名稱都是根據(jù)元素所在位置進(jìn)行命名的，分別表示左邊、中間欄和右欄，類似的還有top、bottom等.這些都是有效命名，名稱簡單且能夠使人顧名思義，因此滿足了對元素的標(biāo)識以及應(yīng)用CSS樣式的需要.由于語義化命名方法注重元素位置的描述性，使其缺乏擴(kuò)展性.例如，如果3個元素都位于頁面右側(cè)，用right、right-side或right-column來命名就顯的沒有區(qū)分度；使用right1、right2和right3來命名，又會弱化語義描述性，不利于后期維護(hù)和更新，因此設(shè)計師無法通過某個名稱來確定該名稱所對應(yīng)的模板.

特別是在頁面內(nèi)不同地方使用時就會顯得不合適甚至造成誤解.例如，如果把名稱為right的模塊移動到頁面中間區(qū)域，很顯然這個名稱就失去了語義的描述性，那就要重新命名，如cnter或middle等，因此對于后期維護(hù)和更新就顯得非常麻煩.

同時，語義化命名法沒有涉及文檔的結(jié)構(gòu)，使樣式與結(jié)構(gòu)脫節(jié)，設(shè)計師會遇到該命名定義的樣式而不知所適用的對象的問題.如果能夠結(jié)合結(jié)構(gòu)化命名方法會擴(kuò)大名稱的應(yīng)用范圍，讀者也能夠定義出更多符合需要的名稱.

在定義類名時，設(shè)計師常用樣式語義化方法來描述名稱，即根據(jù)類被定義的樣式來概括描述命名，在這方面語義化命名方法就顯得很有優(yōu)勢，例如：

1)使用顏色名稱或16進(jìn)制代碼命名顏色類：

.blue{color:blue;}

.f00{color:#f00;}

.abc123{color:#abc123}

2)使用“font+字體大小”組合方法命名字體大小類

.font12px{font-size:12px}

.font9pt{font-size:9pt}

3)使用英文名稱命名類

.left{float:left;}

.bottom{float:bottom;}

3.2 結(jié)構(gòu)化命名

結(jié)構(gòu)化命名方法一般根據(jù)文檔結(jié)構(gòu)而不是樣式或位置的描述命名，這樣我們就可以通過簡單的更新來實現(xiàn)對CSS聲明名稱的重用，從而高效利用不同的樣式，例如：

id=“main_nav”

id=“sub_nav”

id=“main-content”

在上面代碼中，這3個名稱都是根據(jù)文檔結(jié)構(gòu)進(jìn)行命名的，分別表示主導(dǎo)航、次要導(dǎo)航和主要內(nèi)容塊，這些名稱都是根據(jù)元素在頁面中的結(jié)構(gòu)進(jìn)行描述.當(dāng)看到樣式時，設(shè)計師能夠清楚它所對應(yīng)的元素，即使該元素被調(diào)整了位置，依然不會影響名稱與元素之間的對應(yīng)關(guān)系.

結(jié)構(gòu)化名稱與語義化名稱一樣易懂，但它們描述了頁面的結(jié)構(gòu)而不是位置或外觀樣式.這更符合XTML結(jié)構(gòu)化需要，因此設(shè)計師在不改變頁面結(jié)構(gòu)的情況下應(yīng)使用不同的樣式.使用結(jié)構(gòu)化命名方法可以幫助設(shè)計師在升級和更新網(wǎng)站時變得更加輕松.

3.3 慣例命名

所謂慣例命名其實就是綜合利用語義化命名與結(jié)構(gòu)化命名后，網(wǎng)頁設(shè)計師們設(shè)計出的廣受歡迎，并被網(wǎng)頁設(shè)計同行廣泛使用的CSS名稱，隨著網(wǎng)頁設(shè)計師們大力的支持，這些名稱就被被逐步固定下用來描述特定的意思，最后成為一種慣例命名.例如，在CSS布局中常用的site表示站點(diǎn)；模塊中常用的logo表示標(biāo)志；類常用的title表示標(biāo)題；導(dǎo)航常用的leftsidebar表示左導(dǎo)航；css文件常用的master.Css表示主要文件等.

[1] 朱印宏.CSS商業(yè)網(wǎng)站布局之道[M].北京：清華大學(xué)出版社，2007

[2] 百度文庫[EB/OL].http://wenku.baidu.com/link?url=KYbDMsBiNbZHc5_DjB8BIwRAwBulvsLSDPz-l1WZ- jDLKvGZnqSm0BUZ1F8Jfi3yhIaEl7W__fSbFerjR69yfSlCVDUc5kRLpwAO8AYrQnRy

Explorations on the Rules and Skills for Naming CSS Code

Liu Wei

(Shanxi Youth Vocational College, Taiyuan 030032, China)

Naming CSS code reasonably and scientifically can not only simplify the code but also improve the efficiency of code development, which helps designers maintain and revise website. By analyzing the rules for naming CSS code, to put forward three naming skills such as naming according to meaning, naming according to structure, and naming according to convention.

CSS; naming; rule; skill

2014-10-21

劉 偉(1980-)，男，山西太原人，碩士，山西青年職業(yè)學(xué)院講師,主要從事計算機(jī)應(yīng)用技術(shù)研究.

1672-2027(2015)01-0058-03

TP393

A