
规范化的CSS不仅利于团队合作,而且对后期的维护以及代码的重用,都非常重要。
我们从以下四个方面来介绍一下关于CSS规范的内容。
(1)命名规范
(2)书写规范
(3)注释规范
(4)CSS reset
命名规范
命名规范,主要有四个方面:CSS文件命名、id和class命名 、网页主体命名、网页细节命名。
CSS文件命名不同样式和内容的文件要用不同的名字来区分,方便后期查看。
| 文件名 | 说明 |
| reset.css | 重置样式 |
| global.css | 全局样式,定义页面基础样式 |
| themes.css | 主题样式 |
| module.css | 模板样式 |
| master.css | 母版样式 |
| columns.css | 专栏样式 |
| form.css | 表单样式 |
| mend.css | 补丁样式 |
| print.css | 打印样式 |
文件命名方式很多,不用刻意去记,需要的时候直接查看就行。
id和class命名id和class命名,比较常见的有三种方法。
(1)骆驼峰命名法
(2)中划线命名法
(3)下划线命名法
命名统一规范,尽量不要出现一个用中划线命名,而另外一个用下划线命名的情况。
网页主体命名主体部分命名可以参考下表
| 主体部分 | 命名 |
| 最外层 | wrapper |
| 头部 | header |
| 内容 | content |
| 侧栏 | sidebar |
| 栏目 | column |
| 导航条 | nav |
| 标志 | logo |
| 主体 | main |
| 左侧 | main-left |
细节部分可以分为导航、菜单、其它三部分。
(1)导航命名
| 导航部分 | 命名 |
| 主导航 | main-nav |
| 子导航 | sub-nav |
| 边导航 | side-nav |
| 左导航 | leftside-nav |
| 右导航 | rightside-nav |
| 顶导航 | top-nav |
(2)菜单命名
| 菜单部分 | 命名 |
| 菜单 | menu |
| 子菜单 | submenu |
(3)其它命名
| 其它部分 | 命名 |
| 标题 | title |
| 摘要 | summary |
| 登录条 | loginbar |
| 搜索 | search |
| 标签页 | tab |
| 图标 | icon |
| 工具条 | toolbar |
| 帮助 | help |
| 指南 | guide |
对于上面的命名规范,不用刻意去记,在需要的时候查看就行了,主要要了解这种思想,为以后的开发节约成本。
书写规范
CSS中,属性的书写顺序也是很有讲究的。良好的书写顺序习惯,既方便阅读,同时也方便后期维护。
推荐的CSS属性书写顺序如下表
| 属性类别 | 举例 |
| 影响文档流属性 | display、position、float等 |
| 自身盒模型属性 | width、height、padding等 |
| 文本性属性 | font、line-height等 |
| 装饰性属性 | color、background-color等 |
| 其它属性 | content、list-style等 |
注释规范
CSS中,为一些关键代码做一下注释是非常必要的。可以带来许多方便,如:方便理解、方便查找、方便项目组里的其他开发人员了解你的代码、方便以后对自己的代码进行修改。
顶部注释顶部注释是文件的基本信息,一般包括文件说明、文件版本(更新)、作者以及版权声明等。
/*
文件基本信息
*/
模块注释模块注释是各个模块(如导航、底部信息栏等)的注释说明,模块注释建议要说明“开始”和“结束”
/*导航部分开始*/
/*导航部分结束*/
简单注释简单注释一般用于注释某些关键代码,如功能代码。简单注释分为单行注释和多行注释这两种。
单行注释
/* */
多行注释
/*
*/
以上注释都是在开发阶段,但是当网站发布时候,会使用工具进行压缩才发布出去。压缩工具会删除所有注释,有些时候为了保留一些版权声明的注释说明,需要使用下面方式 。
/*! 注释内容 */
在注释内容最前面加上一个“!”,这样压缩工具就不会删除这条注释信息了。
CSS reset
在HTML中很多元素都有一定的默认样式。如下表
| 元素 | 默认样式 |
| p | 有上下边框 |
| strong | 有字体加粗样式 |
| em | 有字体倾斜样式 |
| ul | 有缩进样式 |
reset就是“重置”的意思,CSS reset指的就是重置样式。简单的说法就是:去除元素在浏览器的默认样式。
现在浏览器有很多,不同的浏览器,元素默认样式也是不同的。浏览器默认样式的不同,往往给开发带来很大的麻烦,并且影响开发效率 ,这就需要去除元素在浏览器的默认样式。
可以通过去除元素在浏览器的默认样式,使得HTML元素具有相同的初始样式,然后再对元素进行统一定义,就可以让页面在不同的浏览器中产生相同的显示效果。
使用方式可以搜索Eric Meyer发布的重置样式表 。
对于CSS reset一些注意:
(1)CSS reset代码必须在其他CSS之前引入
(2)CSS reset代码是应该根据个人需求不同来定义
(3)CSS reset代码也有很多不足,可以审视并修订这段代码再拿来用。
本节主要学习了CSS一些规范,最后对其总结。
命名规范
书写规范
注释规范
CSS reset