Div的class和id命名规范

有时候我们在建站的时候对div的class或者id如何命名感到头大，越到后面可能拼音或者首字母缩写直接就上去了，为了给自己、给同项目的人一个整洁、直观的命名，规范div的class和id命名是很有必要的，下面列出常见的div命名法：

内容：content/container 

导航：nav 

侧栏：sidebar        

栏目：column 

标志：logo 

页面主体：main       

广告：banner 

热点：hot 

新闻：news     

下载：download 

子导航：subnav 

菜单：menu   

搜索：search 

页脚：footer 

滚动：scroll     

版权：copyright 

友情链接：friendlink或link

子菜单：submenu    

内容：content 

标签页：tab 

文章列表：list    

注册：regsiter 

提示信息：msg 

小技巧：tips    

加入：joinus 

栏目标题：title 

指南：guild    

服务：service 

状态：status 

投票：vote      

尾：footer 

合作伙伴：partner 

登录条：loginbar    

页面外围控制整体布局宽度：wrapper 

左右中：left right center           

(二)注释的写法:    /* Footer */   

 内容区     /* End Footer */    

三)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.一律小写;    

2.尽量用英文;    

 3.不加中杠和下划线; （我倒是经常加）    

4.尽量不缩写，除非一看就明白的单词. （偷懒经常缩写）   

主要的 master.css 模块 module.css 基本共用 base.css    

主题 themes.css 

专栏 columns.css 

打印 print.css 

文字 font.css 

表单 forms.css 

补丁 mend.css    

布局，版面 layout.css