css 书写规范

样式表索引

样式表头部索引定义可以帮助你和其它人弄清楚该样式表文件的相关信息，它一般是一段格式化的CSS注释文本。

给出该css文件作者的相关信息 
定义站点的布局（几栏，静态布局/动态布局） 
记录文件版本号（利于多作者协作及将来更新）  

样式表索引

命名锚点

命名锚点是用来规划整个CSS文件结构的（就好像书签一样），从而使整个CSS文件获得良好的组织。

命名锚点一般也是书写在样式表头部的索引注释中。CSS本身没有内部的锚点系统，所以我一般采用下面的小技巧来完成。在头部索引拷贝你想找到的锚点，并在整个文档中查找，从而获取该CSS节。（描述的可能不清晰，看下面图应该就明白了） 

命名锚点定义及查找

一．文件命名规范

全局样式：global.css；
框架布局：layout.css；
字体样式：font.css；
链接样式：link.css；
打印样式：print.css；

1.通用命名规则：

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>

6) 页面所有图片区域全部采用：pic_1、pic_2、pic_3、pic_N

7) 页面文本列表区域全部采用： Lst_1、Lst_2、Lst_3、Lst_N

8) 页面上按钮采用：btn_1、btn_2、btn_3、btn_N

9) 广告区域：ad_1,ad_2,ad_3,ad_N

2.主框架命名规则：

1) #header (页面头部)

2) #main (页面主体)

3) #footer (页面尾部)

二．常用类/ID命名规范

页　眉：header
内　容：content
容　器：container
页　脚：footer
版　权：copyright　
导　航：menu
主导航：mainMenu
子导航：subMenu
标　志：logo
标　语：banner
标　题：title
侧边栏：sidebar
图　标：Icon
注　释：note
搜　索：search
按　钮：btn
登　录：login
链　接：link
信息框：manage
……

常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。对于二级类/ID命名，则采用组合书写的模式，后一个单词的首字母应大写：诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名这“searchIcon”、“搜索按钮”命名为“searchBtn

二．注释书写规范

1、行间注释：

直接写于属性值后面，如：

.search{
border:1px solid #fff;/*定义搜索输入框边框*/
background:url(../images/icon.gif) no-report #333;/*定义搜索框的背景*/
}

2、整段注释：

分别在开始及结束地方加入注释，如：

/*=====搜索条=====*/
.search {
border:1px solid #fff;
background:url(../images/icon.gif) no-repeat #333;
}
/*=====搜索条结束=====*/

缩写

在CSS中经常会利用缩写把多个相同类型的属性定义指定为一个。

CSS缩写会使CSS文档更加干净、简洁。下面是几个例子：

所有<和&特殊符号用编码表示

每个标签都要有开始和结束，且要有正确的层次,没有结束标签的，标签后加上"/"。 如：<img />、<br />

所有的属性必须用引号""括起来

给页面的布局和重要的区块加上注释,如：<!—header --> 

给图片加上alt标签，利于搜索引擎的查询。