WEB網(wǎng)站開發(fā)程序員在對(duì)HTML、CSS、JS代碼的ID、類命名時(shí)，還有注釋，如何才能寫得簡(jiǎn)單明了，讓人一看就明白呢？

在稍大型的項(xiàng)目開發(fā)過程中，都是團(tuán)隊(duì)作業(yè)，團(tuán)隊(duì)成員之間如何才能高效的配合，理解別人寫的代碼，在命名規(guī)范上，有一些約定是非常必要的。下面就根據(jù)我們的實(shí)際項(xiàng)目經(jīng)驗(yàn)，分享一下HTML代碼的一些命名規(guī)范，希望能幫到大家。

 

HTML代碼，通常來說，包含：1、元素標(biāo)簽代碼，即body，div，p，a，input等等；2、css代碼；3、JS代碼。三者都有各自的命名規(guī)范。根據(jù)不同的企業(yè)習(xí)慣，規(guī)范也不一樣。不過，一般而言。簡(jiǎn)單明了肯定是所有開發(fā)命名中的重要考慮點(diǎn)。列舉一些常用的CSS標(biāo)準(zhǔn)化設(shè)計(jì)命名：

1、類class的命名規(guī)范示例

頭：header

內(nèi)容：content/container

尾：footer

導(dǎo)航：nav　

側(cè)欄：sidebar

欄目：column　　

頁(yè)面外圍控制整體布局寬度：wrapper　　

左右中：left right center　　

登錄條：loginbar　　

標(biāo)志：logo　　

廣告：banner　　

頁(yè)面主體：main　　

熱點(diǎn)：hot　　

新聞：news　　

下載：download　　

子導(dǎo)航：subnav　　

菜單：menu　　

子菜單：submenu　　

搜索：search　　

友情鏈接：friendlink　　

頁(yè)腳：footer　　

版權(quán)：copyright　　

滾動(dòng)：scroll　　

內(nèi)容：content　　

標(biāo)簽頁(yè)：tab　　

文章列表：list　　

提示信息：msg　　

小技巧：tips　　

欄目標(biāo)題：title　　

加入：joinus　　

指南：guild　　

服務(wù)：service　　

注冊(cè)：regsiter　　

狀態(tài)：status　　

投票：vote　　

合作伙伴：partner

 

2、id的命名規(guī)范示例

（1）頁(yè)面結(jié)構(gòu)

　　容器： container

　　頁(yè)頭：header

　　內(nèi)容：content/container

　　頁(yè)面主體：main

　　頁(yè)尾：footer

　　導(dǎo)航：nav

　　側(cè)欄：sidebar

　　欄目：column

　　頁(yè)面外圍控制整體布局寬度：wrappe

    左右中：left right center

（2）導(dǎo)航

　　導(dǎo)航：nav

　　主導(dǎo)航：mainbav

　　子導(dǎo)航：subnav

　　頂導(dǎo)航：topnav

　　邊導(dǎo)航：sidebar

　　左導(dǎo)航：leftsidebar

　　右導(dǎo)航：rightsidebar

　　菜單：menu

　　子菜單：submenu

　　標(biāo)題： title

　　摘要： summary　

?。?）功能

　　標(biāo)志：logo

　　廣告：banner

　　登陸：login

　　登錄條：loginbar

　　注冊(cè)：regsiter

　　搜索：search

　　功能區(qū)：shop

　　標(biāo)題：title

　　加入：joinus

　　狀態(tài)：status

　　按鈕：btn

　　滾動(dòng)：scroll

　　標(biāo)簽頁(yè)：tab

　　文章列表：list

　　提示信息：msg

　　當(dāng)前的： current

　　小技巧：tips

　　圖標(biāo)： icon

　　注釋：note

　　指南：guild

　　服務(wù)：service

　　熱點(diǎn)：hot

　　新聞：news

　　下載：download

　　投票：vote

　　合作伙伴：partner

　　友情鏈接：link

　　版權(quán)：copyright

 

3、類class的書寫規(guī)范示例

　?。?）顏色：使用顏色的名稱或者16進(jìn)制代碼，如

　　.red { color： red； }

　　.f60 { color： #f60； }

　　.ff8600 { color： #ff8600； }

?。?）字體大小，直接使用"font+字體大小"作為名稱，如

　　font12px { font-size： 12px； }

　　.font9pt {font-size： 9pt； }

?。?）對(duì)齊樣式，使用對(duì)齊目標(biāo)的英文名稱，如

　　.left { float：left； }

　　.bottom { float：bottom； }

?。?）標(biāo)題欄樣式，使用"類別+功能"的方式命名，如

　　.barnews { }

　　.barproduct { }

 

4、CSS文件命名示例

　　主要的 master.css

　　模塊 module.css

　　基本共用 base.css

　　布局，版面 layout.css

　　主題 themes.css

　　專欄 columns.css

　　文字 font.css

　　表單 forms.css

　　補(bǔ)丁 mend.css

　　打印 print.css

 

5、注意事項(xiàng)

　 （1）一律小寫；

　　（2）盡量用英文；

　　（3）不加中杠和下劃線；

　?。?）盡量不縮寫，除非一看就明白的單詞。

 

以上就是一些經(jīng)常要用到的命名規(guī)范，大家可以根據(jù)實(shí)際的項(xiàng)目情況參考。