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

第4章：CSS规范

4.1 CSS规范简介

• 规范化的代码更易于阅读，降低不管是修改现有代码，还是扩展新代码的维护成本。

• 代码的规范化问题，往往在规模大的项目协作中突显出来。1个人的代码写得晦涩难懂，别人也无从得知，但如果在100个人的项目组中，每个人都在写烂代码，项目只会是举步维艰。

4.2 命名规范

4.2.1 CSS文件命名

注意：在开发阶段，我们通常将不同作用的css代码段放到多个独立的文件，以便于开发和修改。在发布时，则会通过工具把多个CSS文件压缩合并成一个文件，避免页面引发多次HTTP请求载入多个文件。

• 常用的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>

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

4.3 书写规范

• 对于普通的CSS代码，建议以下的CSS书写顺序来书写：

• 当然并不是说书写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