一周一章前端书·第15周：《HTML与CSS进阶教程》S02E02

第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名作为前缀；

• 参考采用常见的页面主体部分的命名：

页面部分	命名
最外层	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代码段方到最前面才有意义；
  • 应该根据项目的具体情况，对重置样式表来进行调整使用，而不是简单的复制粘贴到项目中，所谓“滥用不如不用”；