CSS命名規範

標籤：bsp   ott   劃線   orm   標籤頁   container   功能區   目標   子功能表   

CSS命名規範一、頁面結構

容器: container

頁頭：header

內容：content/container

頁面主體：main

頁尾：footer

導航：nav

側欄：sidebar

欄目：column

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

左右中：left right center

二、導航

導航：nav

主導航：mainnav

子導航：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

友情連結：friendlink

著作權：copyright

四、顏色

使用顏色的名稱或者16進位代碼,如

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

五、字型大小

直接使用"font+字型大小"作為名稱,如

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

六、對齊樣式

使用對齊目標的英文名稱,如

.left { float:left; }

.bottom { float:bottom; }

七、標題列樣式

使用"類別+功能"的方式命名,如

.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命名規範