css命名規則：圖片切圖轉網頁的代碼規範

文章簡介：網頁切圖過程中div+css命名規則.

網上整理的比較好的css命名規則，為css代碼的正常化做參考，增加代碼的可讀性。

id的命名:
(1)頁面結構
容器: container 頁頭：header 內容：content/container
頁面主體：main 頁尾：footer 導航：nav
側欄：sidebar 欄目：column 左右中：left right center
頁面外圍控制整體布局寬度：wrapper

(2)導航
導航：nav
主導航：mainbav
子導航：subnav
頂導航：topnav
邊導航：sidebar
左導航：leftsidebar
右導航：rightsidebar
菜單：menu 子功能表：submenu 標題: title 摘要: summary

(3)功能
標誌：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.不使用大寫形式的類名和id名;

2.儘可能使用描述性的英文單詞的組合作為類名和id名;

3.id名及類名的多個英文單詞之間使用“_”虛線分隔;

4.按地區進行描述編號 例：main01_div01_ul01 (可以理解為主體第一地區 第一DIV下的第一個UL)

附：一些CSS架構的命名參考

主要的 master.css 模組 module.css 基本共用 base.css
主題 themes.css 專欄 columns.css 列印 print.css
文字 font.css 表單 forms.css 補丁 mend.css
布局，版面 layout.css