web前端开发企业级CSS常用命名，书写规范总结

(1)页面结构

容器: container　　页头：header　　内容：content/container　　页面主体：main　　页尾：footer　　导航：nav　　侧栏：sidebar　　栏目：column　　页面外围控制整体布局宽度：wrapper　　左右中：left right center

(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

3.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; }

 1 　　.xxx { 2 ?3 　　　/* Positioning */ 4 ?5　　　　 position: absolute; 6 ?7 　　　　top:0; 8 ?9 　　　　right:0;10 11 　　　　bottom:0;12 13 　　　　left:0;14 15 　　　　z-index:100;16 17 　　　/* Box-model */18 19 　　　　display: block;20 21　　　　 float: right;22 23　　　　 width: 100px;24 25　　　　 height: 100px;26 27 　　　/* Typography */28 29 　　　　font: normal 13px "Helvetica Neue", sans-serif;30 31 　　　　line-height:1.5;32 33 　　　　color:#333;34 35 　　　　text-align: center;36 37 　　　/* Visual */38 39 　　　　background-color:#f5f5f5;40 41 　　　　border: 1px solid #e5e5e5;42 43　　　　 border-radius: 3px;44 45 　　　/* Misc */46 47 　　　　opacity:1;48 49 　　}