第4章：CSS规范
4.1 CSS规范简介
规范化的代码更易于阅读，降低不管是修改现有代码，还是扩展新代码的维护成本。
代码的规范化问题，往往在规模大的项目协作中突显出来。1个人的代码写得晦涩难懂，别人也无从得知，但如果在100个人的项目组中，每个人都在写烂代码，项目只会是举步维艰。
4.2 命名规范
4.2.1 CSS文件命名
注意：在开发阶段，我们通常将不同作用的css代码段放到多个独立的文件，以便于开发和修改。在发布时，则会通过工具把多个CSS文件压缩合并成一个文件，避免页面引发多次HTTP请求载入多个文件。
常用的css文件名：
| 文件名 | 说明 |
|---|---|
| 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命名的注意事项：
使用英文命名而非中文拼音；
命名尽量不缩写，或者采用常用的缩写单词，比如
nav；命名规范保持统一，不要混入多种命名方式；
为避免class命名的重复，通常使用父元素的class名作为前缀；
<div class="column"> <h3 class="column-title"></h3> <div class="column-content"></div></div>
参考采用常见的页面主体部分的命名：
| 页面部分 | 命名 |
|---|---|
| 最外层 | 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代码段方到最前面才有意义；
应该根据项目的具体情况，对重置样式表来进行调整使用，而不是简单的复制粘贴到项目中，所谓“滥用不如不用”；
作者：梁同学de自言自语
链接：https://www.jianshu.com/p/db9d190043fe
随时随地看视频
