劉 偉

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

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

劉 偉

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

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

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

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

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

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

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

2.1 借鑒程序語言命名方法

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

2.2 要區(qū)分大小寫

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

2.3 要注意合法性

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

1)合法名稱

Style.css

topMenu

2)非法名稱

263_color

-my-site

2.4 要注意簡明扼要，詞必達意

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

3 CSS代碼命名技巧

Css代碼命名對于網頁設計和維護很重要，目前主要的CSS代碼命名主要包括三種：

3.1 語義化命名

當在網頁設計中需要對元素進行標識命名時，最自然的做法就是使用可以描述元素所在位置的語義詞匯來對其命名，例如：

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

id=“center-column”

id=“right-column”

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

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

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

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

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

.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 結構化命名

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

id=“main_nav”

id=“sub_nav”

id=“main-content”

在上面代碼中，這3個名稱都是根據文檔結構進行命名的，分別表示主導航、次要導航和主要內容塊，這些名稱都是根據元素在頁面中的結構進行描述.當看到樣式時，設計師能夠清楚它所對應的元素，即使該元素被調整了位置，依然不會影響名稱與元素之間的對應關系.

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

3.3 慣例命名

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

[1] 朱印宏.CSS商業(yè)網站布局之道[M].北京：清華大學出版社，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è)學院講師,主要從事計算機應用技術研究.

1672-2027(2015)01-0058-03

TP393

A