新手必看的css命名規則

下面小編就為大家帶來一篇淺談css命名規則(新手必看)。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

頭：header　　
內容：content/container　　
尾：footer　　
導航：nav　　
側欄：sidebar
欄目：column
頁面外圍控制整體佈局寬度：wrapper　　
左右中：left right center　　
登錄條：loginbar　　
標誌：logo　　
廣告：banner　　
標誌：logo　　
廣告：banner　　
頁面主體：main#」頁面主體： ：hot　　
新聞：news
下載：download　　
子導覽：subnav　　
選單：menu　　
子選單：submenu　　
搜尋：search　　
子選單：submenu　　
搜尋：search　友情　
子選單：sub頁尾：footer　　
版權：copyright　　
滾動：scroll　　
內容：content
標籤頁：tab
文章清單：list
提示訊息：msg
小技巧：tips
欄位目標題：title
加入：joinus
指南：guild
服務：service
註冊：regsiter
狀態狀態：status

投票：vote

合作夥伴： partner註解的寫法

/* Footer */

內容區

/* End Footer */ id的命名


容器: container
頁頭：header
內容：content/container
頁面主體：main
頁尾：footer
導覽：nav
側邊欄：sidebar
欄位：column

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

左右中：left right center
#id的命名

頁面結構

容器: container
頁頭：header
內容：content/container
頁面主體：main
頁尾：footer
導覽：nav
側邊欄：sidebar
欄位：column

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

左右中：left right center導航

導航：nav
主導航：mainbav
子導航：subnav
頂導覽：topnav
邊導覽：sidebar
左導覽：leftsidebar
右導覽：rightsidebar
選單：menu
子選單：submenu

標題: title

摘要: summary功能


標誌：logo
廣告：banner
登陸：login
登入條：loginbar
註冊：regsiter
搜尋：search
功能區：shop
標題：title
加入：joinus
狀態：status
按鈕：btn
滾動： scroll
標籤頁：tab
文章清單：list
提示訊息：msg
目前的: current
小技巧：tips
圖示: icon
註解：note
指南：guild
服務：service
熱點：hot
新聞：news
下載：download
投票：vote
合作夥伴：partner

友情連結：link

版權：copyrightclass的命名

(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 { }注意事項

1.一律小寫;
2.盡量用英文;
3.不加中槓和底線;
4.盡量不縮寫，除非一看就明白的單字.
主要的master.css
模組module.css
基本共用base.css
佈局，版面layout.css
主題themes.css
專欄columns.css
文字font.css
表單forms.css

補丁mend.css

印print.css

以上就是小編為大家帶來的淺談css命名規則(新手必看)全部內容了，希望大家多多支持PHP中文網~

######

以上是新手必看的css命名規則的詳細內容。更多資訊請關注PHP中文網其他相關文章！