css样式书写规范.doc

PAGE1/NUMPAGES1

css样式书写规范

CSS样式书写规范版权所有日期版本描述作者2011.02.101.0周艳目录12CSS规范重要性23书写规范1.13CSS书写规范1.23CSS命名规则1.33CSS书写顺序1.44CSS文件注释书写规范1.54css选择器1.65css缩写1.77Hack书写规范1.88Xhtml书写建议310命名规范1.110常用CSS命名规范1.211文件命名规范1.311CSS命名规范411其他注意事项1.CSS规范重要性1.为html5+css3.0发展做基础头部、底部用header、footer来命名，最终html调用css样式既是这种形式。

以后html5+css3.0标准将是直接用标签来表示头部，能为以后版本升级规范做基础。

2.节约团队开发时间css命名规范可以节约团队开发时间，在团队合作开发项目中，规范的制作一套共识的css命名，能节约开发时间及成本。

如果开发项目中任意命名css，将给开发人员解读带来不便。

3.便于维护css命名规范可为后期维护带来方便，Div+css设计完成后，很难保证后期不进行调整及优化，如果没有一套css命名特点，将为日后的维护带来不便。

2.书写规范1.1CSS书写规范1.id和class命名采用该版块的英文单词或组合命名，并第一个单词小写，第二个单词首个字母大写，如:搜索区域(searchbarTop)，伸缩区域(flexbarTop)。

2.css样式表各区块用注释说明(见1.4CSS文件注释书写规范)。

3.尽量使用英文命名原则。

4.不用加中杠和下划线。

5.名称总长不要超出12个英文单词长度，如果多个单词组合超出该长度，用缩写或单词首写字母表示，意义清晰即可。

6.尽量不缩写，除非一看就明白的单词。

7.css文件中必需写明创建人、创建时间(格式见1.4CSS文件注释书写规范)。

8.1在css文件中必需写明字符集定义，通常字符集定义为@charsetutf-8。

特殊情况根据实际项目定义。

.2CSS命名规则Css命名：

功能名、自身名称、功能名+位置、功能名+自身名称、功能名+位置+自身名称这5种形式，根据需要选择任一形式命名(命名需简短而意义清晰)。

命名采用驼峰式，第一个单词小写，第二个单词首个字母大写。

例如：

页面顶部的搜索区域样式取名：

searchbarTop，是searchbar+Top(功能名+位置)2部分构成。

保存按钮样式取名：

btnSave，是btn+Save(功能名+自身名称)2部分构成。

字内体样式命名：

font12(字号12px)，是font+12(功能名+自身名称)2部分构成。

间距样式命名：

padding10(内间距10px)，是padding+10(功能名+自身名称)2部分构成。

1.3CSS书写顺序1.显示属性*display*list‐style*position*float*clear2.自身属性*width*height*margin*padding*border*background3.文本属性*color*font*text‐decoration*text‐align*vertical‐align*white‐space*othertext*content1.4CSS文件注释书写规范1.行间注释：

直接写于属性值后面。

如：

.btnSave{border:1pxsolid#fff;/*定义按钮边框*/background:url(../images/btnSave.gif)no‐report#333;/*定义按钮的背景*/}2.整段注释：

分别在开始及结束地方加入注释。

如：

/*按钮star*/.btnSave{border:1pxsolid#fff;background:url(../images/btnSave.gif)no‐repeat#333;}/*按钮end*/3.协助注释非作者维护时所加入的表示修改时间、修改人等标识信息。

在区域注释或单行注释的基础上加上修改人和修改时