分享div+css前端命名的規則

我們在開發CSS DIV網頁的時候，比較困惑和糾結的事就是CSS命名，特別是新手不知道該如何命名，經常感覺到詞窮，接下來就和大家講講div css前端命名的規則，需要的朋友可以參考一下，希望對你有幫助。

前端佈局規格細則

一、命名規格：

1、基本需求：

1）文件編碼統一使用UTF-8 編碼； 

2）命名時以符合語意為主要參考指標，CSS屬性書寫規範，採用統一風格及命名方法； 

3）結構清晰，層級關係明朗，以不超過三級為標準； 

4）同一表現形式的樣式要求可重複利用，模組組件類別的樣式要求可整體外部移植； 

5）編寫CSS的時候，應避免使用CSS Hack，能不用則不用。 

6）所有頁面預設都針對Firefox 等最接近標準的瀏覽器進行設計，然後使用 IE 特有條件註解功能進行針對性修正。 

7）請使用英文命名，盡量避免使用拼音。命名要求具有可讀性，盡量避免使用縮寫。命名雖然允許數字，但應盡量避免使用數字命名。 

2、命名方法 要求採用統一的命名方法。常用命名法有： 

1）連寫式命名法，如：helloworld 

2）中線命名法，如：hello-world（目前採用此方法的較多，建議採用）

3）底線命名法，如：hello_world 

4）駱駝命名法，如：helloWorld 

5）帕斯卡命名法，如：HelloWorld 

#6）其他方法。

3、樣式檔案命名規格如： 

全域的：global.css； 

主要的：master.css； 

佈局、版面： layout.css； 

欄位：columns.css； 

文字：font.css； 

列印樣式：print.css； 

主題：themes .css； 

補丁：pacth.css； 

格式化瀏覽器：base.css等。

4、ID及Class命名常用名稱 

頁頭：header 

登入符號：login-bar 

標誌：logo 

側邊欄：side-bar 

廣告：banner 

導覽：nav 

子導覽：sub-nav 

選單：menu 

子選單：sub-menu 

搜尋：search 

捲動：scroll 

頁面主體：main 

內容：content 

#標籤頁：tab 

文章清單：list 

提示訊息：msg 

小技巧：tips 

欄目標題：title 

加入：joinus 

指南：guild 

服務：service 

熱點：hot 

新聞：news 

#下載：download 

註冊：regsiter 

狀態：status 

按鈕：btn 

投票：vote 

##合作夥伴：partner 

#友誼連結：friendlink 

版權：copyright 

外套：wrap 

頁腳：footer 

##標題：title 

#頂級導航：top-nav（mini-nav）

以上是分享div+css前端命名的規則的詳細內容。更多資訊請關注PHP中文網其他相關文章！