第4章：CSS规范
4.1 CSS规范简介
- 规范化的代码更易于阅读，降低不管是修改现有代码，还是扩展新代码的维护成本。
- 代码的规范化问题，往往在规模大的项目协作中突显出来。1个人的代码写得晦涩难懂，别人也无从得知，但如果在100个人的项目组中，每个人都在写烂代码，项目只会是举步维艰。
4.2 命名规范
4.2.1 CSS文件命名
注意：在开发阶段，我们通常将不同作用的css代码段放到多个独立的文件，以便于开发和修改。在发布时，则会通过工具把多个CSS文件压缩合并成一个文件，避免页面引发多次HTTP请求载入多个文件。
| 文件名 |
说明 |
| reset.css |
针对不同的浏览器，重置元素的默认样式 |
| gloal.css |
全局样式，指定页面的基础样式 |
| themes.css |
主题样式，可以实现换肤功能 |
| module.css |
模块样式 |
| master.css |
母版页样式 |
| columns.css |
专栏页样式 |
| forms.css |
表单样式 |
| mend.css |
补丁样式，用于维护、修改样式 |
| print.css |
打印样式，用于打印时的样式 |
4.2.2 id和class命名
- 页面id和class是会影响搜索引擎优化的，如果页面的元素命名很随意，导致搜索引擎小蜘蛛迷路，它以后就会很少来光顾你的网站。
- 常见的id和class的命名方式有三种：
- 驼峰命名法（
subLeftMenu）;
- 中划线命名法（
sub-left-menu）;
- 下划线命名法（
sub_left_menu）;
- id和class命名的注意事项：
- 参考采用常见的页面主体部分的命名：
| 页面部分 |
命名 |
| 最外层 |
wrapper（通常用于包裹整个页面） |
| 头部 |
header |
| 内容 |
content |
| 侧栏 |
sidebar |
| 标志 |
logo |
| 导航条 |
nav |
| 主导航 |
main-nav |
| 子导航 |
sub-nav |
| 主体 |
main |
| 主体左侧 |
main-left |
| 主体右侧 |
main-right |
| 菜单 |
menu |
| 子菜单 |
sub-menu |
| 标题 |
title |
| 摘要 |
summary |
| 搜索 |
search |
| 标签页 |
tab |
| 广告 |
banner |
| 相关文章 |
related |
| 底部 |
footer |
| 友情链接 |
friendlink |
| 加入我们 |
joinus |
| 版权 |
copyright |
| 服务 |
service |
| 登陆 |
login |
| 注册 |
register |
4.3 书写规范
- 对于普通的CSS代码，建议以下的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等 |
- 当然并不是说书写CSS时要按这样的顺序来写，你可以先定义盒模型的属性，再定义元素的布局属性，但最终提交代码时，元素的CSS样式代码按照是这样的顺序就可以了。简单来说是，只关心“书写结果”，而不是“书写过程”。
- 案例：
#main{
/*布局属性*/
display:inline-block;
position:absolute;
top:0;
left:0;
/*盒模型属性*/
width:100px;
height:100px;
border:1px solid gray;
/*文本性属性*/
font-size:15px;
font-weight:boder;
text-indent:2em;
/*装饰性属性*/
color:#fff;
backgroud-color:Red;
/*其他属性*/
cursor:pointer;
}
- 除了普通的CSS代码之外，还有一些专门为了实现特殊功能的CSS代码，比如单行文本居中、块元素居中之类的代码。书写这类CSS代码，可以不遵循上面提到的书写顺序，而是单独插入其中。举例：
#main{
/*布局属性*/
float:left;
width:100px;
/*单行文本居中*/
height:50px;
line-height:50px;
}
4.4 注释规范
- 文件顶部注释通常包含文件的说明、文件的版本更新、作者以及版权声明：
/*
* @description: 说明
* @author: 作者
* @update: 更新时间，如2018-01-28
*/
- 模块注释是各个页面组件模块（如导航、底部信息栏）的注释说明，一般说明代码的“开始”和“结束”：
/*导航栏代码，开始*/
........
/*导航栏代码，结束*/
- 除此之外，我们还可以向关键代码添加单行/多行注释：
/* 单行注释内容 */
/*
* 多行注释内容
* 多行注释内容
* 多行注释内容
*/
- 项目发布时，工具往往会将代码中的注释全部删除，但通过在注释中添加感叹号，可以保留注释内容：
/*!
*! 发布版本: V1.1
*! 时间: 2018-01-28
*/
4.5 CSS reset
- HTML元素在不同的浏览器上的默认样式是不一样的，往往会给开发带来较大的麻烦。而解决这一烦恼问题的办法就是：去除HTML元素在浏览器的默认样式（CSS reset）。
- 我们不建议直接通过通配符来执行CSS reset，比如
*{padding:0;margin:0;}，因为它会查询并修改所有元素的样式属性，性能较低。这里我们推荐参考使用Eric Meyer发布的 重置样式表。
- CSS reset的注意事项：
- CSS reset是所有样式代码的前提，所以应该将CSS reset代码段方到最前面才有意义；
- 应该根据项目的具体情况，对重置样式表来进行调整使用，而不是简单的复制粘贴到项目中，所谓“滥用不如不用”；
