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 　　}