规范简介

CSS 代码如果没有规范的格式，将会造成各种问题，包括但不限于：不易读，与同事代码相互影响甚至有冲突，臃肿且难以维护，影响范围不易知……

规范的 CSS 代码有利于团队合作和后期维护，本文从四个角度介绍 CSS 规范的内容：命名规范，书写规范，注释规范，CSS reset 。

命名规范

一个良好的命名规范，不仅可以提升代码的阅读体验，而且对搜索引擎优化也是非常重 要的。命名规范主要包括两个方面： CSS 文件命名，id 和 class 命名。

CSS 文件名

image.png
整站发布时使用工具将多个文件合并成一个 CSS 文件，这里把样式划分为多个文件是在开发阶段的做法，按照功能模块划分 CSS 文件，为的是方便开发阶段的开发和修改。

id 和 class 命名

首先要名确，什么时候使用 id 什么时候使用 class 也是很重要的，之后会在 HTML 进阶中学习。

对于 id 和 class，好的命名有很多优点，不仅能提高可读性和可维护性，而且对搜索引擎优化也是相当重要的。搜索引擎通常是根据元素 id 或 class 的命名来识别一个页面。假如一个页面的元素命名很随意的话，搜索引擎“小蜘蛛”很容易迷路，这样会导致它以后很少来“光顾”你的网站。

常见的 id 和 class 命名有以下三种方式：

▶ 驼峰命名法：topMain、subLeftMenu

▶ 下划线命名法：top_main、sub_left_menu

▶ 中划线命名：top-main、sub-left-menu。

关于命名的要注意几点：

▶ 使用英文名

▶ 做到直白，尽量不要缩写

▶ 命名方式统一规范，都用上边三种方式的其中一种，各类大型网站使用中划线居多。

▶ 为了避免 class 命名重复，命名时，一般取父元素 class 名作为前缀，示例如下：

  1. <div class="column">
  2.   <h3  class="column-title"></h3>
  3.   <div class="column-content"></div>
  4. </div>

网页主体部分命名

image.png

网页细节部分

image.png
image.pngimage.png

书写规范

image.png 这种 CSS 属性书写顺序是按照样式功能的重要性从上到下进行了排列，把影响元素页面布局的样式（如 float、margin、padding、height、width 等）排到前面，而把不影响布局的样式（如 background、color、font 等）排到后面。这种主次分明的排列方式，极大地提高了代码的可读性和可维护性。

#main
{
  /*影响文档流属性*/
  display:inline-block;
  position:absolute;
  top:0;
  left:0;
  /*盒子模型属性*/
  width:100px;
  height:100px;
  border:1px solid gray;
  /*文本性属性*/
  font-size:15px;
  font-weight:bold;
  text-indent:2em;
  /*装饰性属性*/
  color:White;
  background-color:red;
  /*其他属性*/
  cursor:pointer;
}

实际书写时并不要必须按照顺序来写，只要能够保障最终的 CSS 代码顺序符合规范即可。

开发中可以将代码分为普通代码和功能代码两部分来考虑：

▶ 普通代码：一般情况下，保障 CSS 最终代码遵循前面提到的顺序。

▶ 功能代码： 对于单行文本居中、块元素居中等具有某一特殊功能的代码块，我们就不应该那么死板了。因 为功能代码往往是通过多个 CSS 属性来实现的，此时如果也遵循表中的书写顺序，那么这些功能代码就会被打乱，并且难以维护。因此，对于功能代码，我们应该集中放在一块来处理。

#main
{
  float:left;
  width:100px;
  /*单行文本居中*/
  height:50px;
  line-height:50px;
  border:1px solid gray;
  font-size:15px;
  color:White;
}

注释规范

顶部注释

顶部注释是文件的基本信息，一般包括文件说明、作者、文件版本（更新）以及版权声明等。 

/*
 *@description:说明
 *@author:作者
 *@update:更新时间
 */

模块注释

模块注释是对各个模块（如导航、底部信息栏等）的注释说明，模块注释建议说明“开始”和 “结束”，从而显得一目了然。

/*导航部分，开始*/
……
/*导航部分，结束*/

简单注释

简单注释一般用于注释某些关键代码，如功能代码。

CSS reset

reset 就是“重置”的意思，CSS reset 指的就是重置样式，简单的说法就是去除元素在浏览器的默认样式

为什么要用 CSS reset

目前主流浏览器种类很多，不同的浏览器中，元素的默认样式也是不同的，这往往会带来很多麻烦，为解决这个问题，一个比较好的方式就是去除浏览器默认样式。

我们可以通过去除元素在浏览器中的默认样式，使得 HTML 元素在所有浏览器具有相同的初始样式，然后再对元素进行统一定义，这样就可以在不同的浏览器产生相同的显示效果了。

如何使用 CSS reset

html, body, div, span, applet, object, iframe, table, caption, 
tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins, 
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, 
acronym, address, big, cite, code, dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend { 
    vertical-align: baseline; 
    font-family: inherit; 
    font-weight: inherit; 
    font-style: inherit; 
    font-size: 100%; 
    outline: 0; 
    padding: 0; 
    margin: 0; 
    border: 0; 
} 
:focus { 
    outline: 0; 
} 
body { 
    background: white; 
    line-height: 1; 
    color: black; 
} 
ol, ul { 
    list-style: none; 
} 
table { 
    border-collapse: separate; 
    border-spacing: 0; 
} 
caption, th, td { 
    font-weight: normal; 
    text-align: left; 
} 
blockquote:before, blockquote:after, q:before, q:after { 
    content: “”; 
} 
blockquote, q { 
    quotes: “” “”; 
}

上面这段代码是前端界中最常见的 CSS reset 代码，它可以去除常见 HTML 元素的默认样式。这个重置样式表包括了最新的 HTML5 元素，并且删除了过时的 HTML 元素。在实际开发中，建议大家使用 CSS reset，这样就不会被元素的默认样式所干扰，从而可以随心所欲地定义自己的样式。除此之外，还有很多不同的重置代码。

对于 CSS reset，要注意以下几点：

▶ CSS reset 代码必须在其他 CSS 代码之前引入。道理很简单：浏览器对 CSS 代码是从上到下来解析的，只有把 CSS reset 放在前面，才会有意义。

▶ 上述代码要加以审视并有所取舍，或者根据开发确定是否要使用，或者自行定制，滥用不如不用。

为什么浏览器要有默认样式

首先为了保证没有样式表的页面也能够正常显示，此外，HTML 元素的默认样式往往跟它的语义挂钩，一个页面能够在没有定义 CSS 的情况下也能有很好的可读性，正是元素默认样式在起作用。