DIV+CSS命名规范

Posted taosiyu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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

注释的写法

/* Footer */ 
内容区 
/* End Footer */

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

 

页面结构

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

导航

导航:nav 
主导航:mainbav 
子导航:subnav 
顶导航:topnav 
边导航:sidebar 
左导航:leftsidebar 
右导航:rightsidebar 
菜单:menu 
子菜单:submenu 
标题: title 
摘要: summary

功能 
标志: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.尽量不缩写,除非一看就明白的单词.

CSS样式文件命名

主要的 master.css 
模块 module.css 
基本共用 base.css 
布局,版面 layout.css 
主题 themes.css 
专栏 columns.css 
文字 font.css 
表单 forms.css 
补丁 mend.css 
打印 print.css

 

以上是关于DIV+CSS命名规范的主要内容,如果未能解决你的问题,请参考以下文章

Div+CSS命名规范

CSS命名规范

项目取名规范

16-CSS选择符详解

HTML5基础CSS命名规范讲解

HTML5基础CSS命名规范讲解