web前端开发CSS命名规范参考

做为一个web前端工程师,每天接触HTML、css就像吃饭一样,但是作为一名合作、优秀的web前端工程师,对DIV+CSS命名还是有一定的规范的,本文整理了一份web前端开发中DIV+CSS各种命名规范。

Div+CSS命名规范一. 窗体

头:header  
内容:content/container  
尾:footer  
导航:nav  
侧栏:sidebar
栏目:column  
页面外围控制整体布局宽度:wrapper  
左右中:left right center
登录条:loginbar  
标志:logo  
广告:banner  
页面主体:main  
热点:hot
新闻:news  
下载:download  
子导航:subnav  
菜单:menu
子菜单:submenu  
搜索:search  
友情链接:friendlink  
页脚:footer
版权:copyright  
滚动:scroll  
内容:content  
标签页:tab
文章列表:list  
提示信息:msg  
小技巧:tips  
栏目标题:title
加入:joinus  
指南:guild  
服务:service  
注册:regsiter
状态:status  
投票:vote  
合作伙伴:partner

二. css注释的写法   

/* Footer */   内容区  /* End Footer */
Html注释的写法 :<!--header头部-- >

三. id的命名

1. 页面结构  
容器: container  
页头:header  
内容:content/container   
页面主体:main  
页尾:footer  
导航:nav   
侧栏:sidebar  
栏目:column  
页面外围控制整体布局宽度:wrapper   
左右中:left right center
2. 导航  
导航:nav  
主导航:mainnav  
子导航: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   
布局,版面:layout.css  
主题:themes.css  
专栏:columns.css   
文字:font.css  
表单:forms.css  
补丁:mend.css  
打印:print.css
上一篇:SQL in查询


下一篇:jQuery ajax的提交