规范化的CSS不仅利于团队合作,而且对后期的维护以及代码的重用,都是十分至关重要的,所以,学习总结CSS规范的相关知识。
CSS规范,主要包含以下4种。命名规范,书写规范,注释规范,CSS reset。
1:命名规范
对于CSS命名规范,主要有两个方面:CSS文件名、id和class命名。
CSS文件命名:
reset.css 重叠样式,重置元素默认样式
global.css 全局样式,全站公用,定义页面基础样式
themes.css 主题样式,用于实现换肤功能
module.css 模块样式,用于模板的样式
master.css 母版样式,用于母版页的样式
columns.css 专栏样式,用于专栏的样式
forms.css 表单样式,用于表单的样式
mend.css 补丁样式,用于维护、修改的样式
print.css 打印样式,用于打印的样式
id和class命名
id和class命名,比较常见的有三种方法。
(1)骆驼峰命名法:例如topMain、subLeftMenu。
(2)中划线命名法:例如top-main、sub-left-menu。
(3)下划线命名法:例如top_main、sub_left_menu。
在CSS中,对于元素id和class的命名。有如下建议:
(1)使用英文命名而不是非中文命名。例如页面头部应该命名为header而不是toubu。
(2)尽量不缩写,除非是一看就明白的单词,例如nav。
(3)命名统一规范,尽量不要出现一个用中划线命名,而另一个用下划线命名,建议使用中划线。
(4)为了避免class命名的重复,命名时一般取父元素的class名作为前缀。
2:书写规范
CSS属性书写顺序
影响文档流属性(布局属性):display、position、float、clear。
自身盒模型属性:width、height、padding、margin、border、overflow。
文本性属性:font、line-height、text-align、text-indent、vertical-align。
装饰性属性:color、background-color、opacity、cursor。
其他属性:content、list-style、quotes。
3:注释规范
(1)顶部注释:顶部注释是文件的基本信息,一般包括文件说明,文件版本(更新),作者以及版权声明等。
(2)模块注释:模块注释是各个模板(如导航,底部信息栏等)的注释说明,模块注释建议要说明“开始”和“结束”,以便一目了然。
(3)简单注释:简单注释一般用于注释某些关键代码。
4:CSS reset
CSS reset指的是重置样式,所谓的重置样式,就是去除元素在浏览器的默认样式。