CSS命名规范

网上整理的比较好的css命名规则，为css代码的规范化做参考，增加代码的可读性。

id的命名: 
(1)页面结构
容器: container 页头：header 内容：content/container
页面主体：main 页尾：footer 导航：nav 
侧栏：sidebar 栏目：column 左右中：leftright 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