常用的CSS命名规则

w3cstandard

<p>头：header<br/>内容：content/container<br/>尾：footer<br/>导航：nav<br/>侧栏：sidebar<br/>栏目：column<br/>页面外围控制整体布局宽度：wrapper<br/>左右中：left right center<br/>登录条：loginbar<br/>标志：logo<br/>广告：banner<br/>页面主体：main<br/>热点：hot<br/>新闻：news<br/>下载：download<br/>子导航：subnav<br/>菜单：menu<br/>子菜单：submenu<br/>搜索：search<br/>友情链接：friendlink <span id="more-103"></span><br/>页脚：footer<br/>版权：copyright<br/>滚动：scroll<br/>内容：content<br/>标签页：tab<br/>文章列表：list<br/>提示信息：msg<br/>小技巧：tips<br/>栏目标题：title<br/>加入：joinus<br/>指南：guild<br/>服务：service<br/>注册：regsiter<br/>状态：status<br/>投票：vote<br/>合作伙伴：partner</p><p>(二)注释的写法:<br/>/* Footer */<br/>内容区<br/>/* End Footer */</p><p>(三)id的命名:</p><p>(1)页面结构<br/>容器: container<br/>页头：header<br/>内容：content/container<br/>页面主体：main<br/>页尾：footer<br/>导航：nav<br/>侧栏：sidebar<br/>栏目：column<br/>页面外围控制整体布局宽度：wrapper<br/>左右中：left right center</p><p>(2)导航<br/>导航：nav<br/>主导航：mainbav<br/>子导航：subnav<br/>顶导航：topnav<br/>边导航：sidebar<br/>左导航：leftsidebar<br/>右导航：rightsidebar</p><p>菜单：menu<br/>子菜单：submenu<br/>标题: title<br/>摘要: summary</p><p>(3)功能<br/>标志：logo<br/>广告：banner<br/>登陆：login<br/>登录条：loginbar<br/>注册：regsiter<br/>搜索：search<br/>功能区：shop</p><p>标题：title<br/>加入：joinus<br/>状态：status<br/>按钮：btn<br/>滚动：scroll</p><p>标签页：tab<br/>文章列表：list<br/>提示信息：msg<br/>当前的: current<br/>小技巧：tips<br/>图标: icon<br/>注释：note</p><p>指南：guild<br/>服务：service<br/>热点：hot<br/>新闻：news<br/>下载：download<br/>投票：vote<br/>合作伙伴：partner<br/>友情链接：link<br/>版权：copyright</p><p>(四)class的命名:</p><p>(1)颜色:使用颜色的名称或者16进制代码,如<br/>.red { color: red; }<br/>.f60 { color: #f60; }<br/>.ff8600 { color: #ff8600; }</p><p>(2)字体大小,直接使用”font+字体大小”作为名称,如<br/>.font12px { font-size: 12px; }<br/>.font9pt {font-size: 9pt; }</p><p>(3)对齐样式,使用对齐目标的英文名称,如<br/>.left { float:left; }<br/>.bottom { float:bottom; }</p><p>(4)标题栏样式,使用”类别+功能”的方式命名,如<br/>.barnews { }<br/>.barproduct { }</p><p>注意事项:</p><p>1.一律小写；<br/>2.尽量用英文；<br/>3.不加中杠和下划线；<br/>4.尽量不缩写，除非一看就明白的单词.<br/>主要的 master.css<br/>模块 module.css<br/>基本共用 base.css<br/>布局，版面 layout.css<br/>主题 themes.css<br/>专栏 columns.css<br/>文字 font.css<br/>表单 forms.css<br/>补丁 mend.css<br/>打印 print.css</p>