CSS代码命名规则

页面制作最重要的就是CSS，定义合理的CSS命名规范，可以大幅提高页面制作的效率和方便开发及相关人员修改编写。关于CSS的命名我们采用骆驼式命名法。

骆驼式命名法： 正如它的名称所表示的那样，是指混合使用大小写字母来构成变量和函数的名字,即函数名中的每一个逻辑断点都有一个大写字母来标记.骆驼式命名法近年来越来越流行了。例如：mianNav footNav

一 、通用命名规则：

1. 所有ID或者class字母和数字之间用“_”连接，如:  #col_1、#col_2
2. 所有ID或者class两个单词之间的链接采用骆驼式命名法，如:  mianNav、footNav
3. 页面主体框架布局命名：Lay_1、Lay_2 、Lay_3
4. 栏目布局容器命名一律采用: col_1、col_2、col_3、col_4、col_N
5. 栏目标题块命名一律采用title。元素标签采用:<h4> 如：

<div class="tit"><h4>标题</h4></div>

1. 页面所有图片区域全部采用：pic_1、pic_2、pic_3、pic_N
2. 页面文本列表区域全部采用： Lst_1、Lst_2、Lst_3、Lst_N
3. 页面上按钮采用：btn_1、btn_2、btn_3、btn_N
4. 广告区域：ad_1,ad_2,ad_3,ad_N

二 、主框架命名规则：

1. #header (页面头部)
2. #main (页面主体)
3. #footer (页面尾部)

三 、通三用命名规则：

主  体：main
外　层：wrap
功能条：funcBar
主导航：mainNav
子导航：subNav
友情链接：friendLink
版  权：copyright
页　眉：header
页　脚：footer
标　题：title
主导航：mainNav
子菜单：subMenu
注  释：note
面包屑：breadcrumb

容  器：container
内  容：content
搜  索：search
登  陆：Login
当前状态：current

页头：header
标志：logo
侧栏：sidebar
广告：banner
导航：nav
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
滚动：scroll
页面主体：main
内容：content
标签页：tab
文章列表：list

信息：msg
提示技巧：tips
栏目标题：title
指南：guide
服务：service
热点：hot
新闻：news
下载：download
注册：reg（register）
状态：status
按钮：btn
投票：vote

四 、常用简写命名规则：

bd：Body
hd：Header
fnt：字体
nav：导航
tb：表格
lnk：链接
ml/mr：margin-left/margin-right
lst：列表
pl / pr / pd：padding-left/-right/padding
col：栏目
frm：表单
con：内容
inf：信息
lg：Logo
inp：Input
ft：Footer
btn：Button
more：更多
fl /fr float:left/float:right
tit 标题栏
spr 空行
t / d / mid / l / r：上 / 下 / 中 / 左 / 右
bdr：边
w：宽
h：高