網(wǎng)站開發(fā)時HTML代碼如何命名才簡單明了

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

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

 

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

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

頭：header

內(nèi)容：content/container

尾：footer

導(dǎo)航：nav　

側(cè)欄：sidebar

欄目：column　　

頁面外圍控制整體布局寬度：wrapper　　

左右中：left right center　　

登錄條：loginbar　　

標志：logo　　

廣告：banner　　

頁面主體：main　　

熱點：hot　　

新聞：news　　

下載：download　　

子導(dǎo)航：subnav　　

菜單：menu　　

子菜單：submenu　　

搜索：search　　

友情鏈接：friendlink　　

頁腳：footer　　

版權(quán)：copyright　　

滾動：scroll　　

內(nèi)容：content　　

標簽頁：tab　　

文章列表：list　　

提示信息：msg　　

小技巧：tips　　

欄目標題：title　　

加入：joinus　　

指南：guild　　

服務(wù)：service　　

注冊：regsiter　　

狀態(tài)：status　　

投票：vote　　

合作伙伴：partner

 

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

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

　　容器： container

　　頁頭：header

　　內(nèi)容：content/container

　　頁面主體：main

　　頁尾：footer

　　導(dǎo)航：nav

　　側(cè)欄：sidebar

　　欄目：column

　　頁面外圍控制整體布局寬度：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

　　標題： title

　　摘要： summary　

　（3）功能

　　標志：logo

　　廣告：banner

　　登陸：login

　　登錄條：loginbar

　　注冊：regsiter

　　搜索：search

　　功能區(qū)：shop

　　標題：title

　　加入：joinus

　　狀態(tài)：status

　　按鈕：btn

　　滾動：scroll

　　標簽頁：tab

　　文章列表：list

　　提示信息：msg

　　當前的： current

　　小技巧：tips

　　圖標： icon

　　注釋：note

　　指南：guild

　　服務(wù)：service

　　熱點：hot

　　新聞：news

　　下載：download

　　投票：vote

　　合作伙伴：partner

　　友情鏈接：link

　　版權(quán)：copyright

 

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

　　（1）顏色：使用顏色的名稱或者16進制代碼，如

　　.red { color： red； }

　　.f60 { color： #f60； }

　　.ff8600 { color： #ff8600； }

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

　　font12px { font-size： 12px； }

　　.font9pt {font-size： 9pt； }

　（3）對齊樣式，使用對齊目標的英文名稱，如

　　.left { float：left； }

　　.bottom { float：bottom； }

　（4）標題欄樣式，使用"類別+功能"的方式命名，如

　　.barnews { }

　　.barproduct { }

 

4、CSS文件命名示例

　　主要的 master.css

　　模塊 module.css

　　基本共用 base.css

　　布局，版面 layout.css

　　主題 themes.css

　　專欄 columns.css

　　文字 font.css

　　表單 forms.css

　　補丁 mend.css

　　打印 print.css

 

5、注意事項

　 （1）一律小寫；

　　（2）盡量用英文；

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

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

 

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