Css的規范命名

頭：header　　?
內容：content/container　　?
尾：footer　　?
導航：nav　　?
側欄：sidebar?
欄目：column　　?
頁面外圍控制整體布局寬度：wrapper　　?
左右中：left right center　　?
登錄條：loginbar　　?
標志：logo　　?
廣告：banner　　?
頁面主體：main　　?
熱點：hot　　?
新聞：news?
下載：download　　?
子導航：subnav　　?
菜單：menu　　?
子菜單：submenu　　?
搜索：search　　?
友情鏈接：friendlink　　?
頁腳：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?
版權：copyright?

class的命名?

(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

轉載于:https://www.cnblogs.com/zmx120/p/5649562.html

總結

以上是生活随笔為你收集整理的css之规范命名的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。