武林網(www.49028c.com)文章簡介：網頁切圖過程中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