分享一些 CSS 开发中的编码规范（一）

这是我参与8月更文挑战的第23天，活动详情查看：8月更文挑战

作为一名合格的前端开发工程师，编码规范是极其重要的，当页面的样式随着时间的增加而变得复杂的时候，CSS 文件和代码量也随之增多，如果没有一个合格的规范去约束我们的编码，这个时候去看我们写过的代码肯定是很痛苦的，如果是别的同事去接手你的项目，那估计也是无从下手。所以，当我们去聊编码规范的时候，不是一定要为了某个标准而去偏执的实现那个标准，而是养成一种习惯和思维，去更好的参与到高效率的团队协作当中，规范编码只是一个很小的方式，每个人的代码风格不同，每个团队、每家公司的编码规范也不完全相同，希望你可以一直保持一个良好的编码规范，然后运用到实际团队协作当中，而不是一个人标新立异。

规范 CSS 编码的好处是什么？

减少代码量，增强可阅读性，提高可维护性。
减少项目沟通的成本，加强开发效率。
提升 CSS 性能，加快页面渲染速度，提升用户体验。
......

1.空格规范

适当的空格可以提升代码的阅读体验，显得更为优雅和美观，目前大多数编辑器的代码美化插件，都会自动的在特定的字符前后追加一个空格，我们看看都有哪些情况。

1-1.选择器与之间

大多数语言的｛前都会有一个空格，CSS 也不例外，样式内容是用｛｝包裹的，内容和选择器之间追加空格。例子：

.user_info {
    margin: 0;
    padding: 0;
}

1-2.冒号与属性值之间

像上面的例子，属性和属性之间的冒号后，也需要追加一个空格，注意，冒号前不需要。例子：

margin: 0;

1-3.逗号后必须跟一个空格

类似的规范在大多数语言的函数传参中也有体现。例子：

color(0.04, rgb(88,94,124));

2.每行的长度限制

规定每行不得超过 120 个字符，除非单行不可分割。例子：

/* 不同属性值按逻辑分组 */
background:
    transparent url(xxxxxxxxxxxxxxxxxxxxxxx)
    no-repeat 0 0;

/* 可重复多次的属性，每次重复一行 */
background-image:
    url(xxxxxxxxxxxxxxxxxxxxxxxx)
    url(xxxxxxxxxxxxxxxxxxxxxxxxxx);

/* 类似函数的属性值可以根据函数调用的缩进进行 */
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.04, rgb(88,94,124)),
    color-stop(0.52, rgb(115,123,162))
);

3.值用双引号包围

属性选择器中的值必须用双引号包围，不允许使用单引号，也不允许不使用引号。例子：

/* 建议 */
article[character="sam"] {
    voice-family: "Bob Barker", "Monty Hall", male;
}

/* 不建议 */
article[character='sam'] {
    voice-family: "Bob Barker", "Monty Hall", male;
}

4.选择器相关

4-1.多个选择器独占一行

当一个规则包含多个选择器时，每个选择器声明必须独占一行，过长导致需要横向滚动阅读剩余的内容，应该尽量使得阅读顺序纵向化。例子：

/* 建议 */
.text-danger,
.danger {
    color:#F56C6C;
}

/* 不建议 */
.text-danger, .danger {
    color:#F56C6C;
}

4-2. 不得为 id、class 选择器添加类型选择器

除了不太美观之外，还会影响一定性能。例子：

/* 建议 */
#error,
.danger-message {
    color: #F56C6C;
}

/* 不建议 */
dialog#error,
p.danger-message {
    color: #F56C6C;
}

4-3.选择器的嵌套层级应不大于 3 级

一般来说，在动手设计样式前就应该先定好 html 结构，尽量使用最少的元素嵌套层级，达到开发效果，建议不超过3级。例子：

/* 建议 */
#username input {}
.comment .avatar {}

/* 不建议 */
.page .header .login #username input {}
.comment div * {}

5.属性相关

5-1.属性定义必须以分号结尾

应该都不是第一次写 CSS 了，分号结尾是强制，记住~ 例子：

/* 建议 */
.user_info {
    margin: 0;
}

/* 不建议 */
.user_info {
    margin: 0
}

5-2.尽量使用属性缩写

这点我也不太用的顺手，虽然少了很多代码量，但是阅读体验确差了很多。例子：

/* 建议 */
.user_info {
    font: 12px/1.5 arial, sans-serif;
}

/* 不建议 */
.user_info {
    font-family: arial, sans-serif;
    font-size: 12px;
    line-height: 1.5;
}

5-3.属性书写顺序规范

同一规则下的属性在书写时，应按功能进行分组。并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果）的顺序书写，以提高代码的可读性。解释：

Formatting Model 相关属性包括：position / top / right / bottom / left / float / display / overflow 等
Box Model 相关属性包括：border / margin / padding / width / height 等
Typographic 相关属性包括：font / line-height / text-align / word-wrap 等
Visual 相关属性包括：background / color / transition / list-style 等另外，为增加可读性，如果包含 content 属性，应放在属性的最前面。例子：

.sidebar {
    /* formatting model: positioning schemes / offsets / z-indexes / display / ...  */
    position: absolute;
    top: 50px;
    left: 0;
    overflow-x: hidden;

    /* box model: sizes / margins / paddings / borders / ...  */
    width: 200px;
    padding: 5px;
    border: 1px solid #ddd;

    /* typographic: font / aligns / text styles / ... */
    font-size: 14px;
    line-height: 20px;

    /* visual: colors / shadows / gradients / ... */
    background: #f5f5f5;
    color: #333;
    -webkit-transition: color 1s;
       -moz-transition: color 1s;
            transition: color 1s;
}