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的命名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

四、class的命名

（1）颜色:使用颜色的名称或者16进制代码,如

1 2 3

.red{color:red; } .f60{color:#f60; } .ff8600{color:#ff8600; }

（2）字体大小,直接使用”font+字体大小”作为名称,如

1 2	.font12px{font-size:12px; } .font9pt{font-size:9pt; }

（3）对齐样式,使用对齐目标的英文名称,如

1 2	.left{float:left; } .bottom{float:bottom; }

（4）标题栏样式,使用”类别+功能”的方式命名,如

1 2	.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