CSS代码编码规范

博客来自：http://www.gbtags.com/gb/tutorials/215/1164.htm

个人主页：http://www.itit123.cn/ 更多干货等你来拿

 CSS代码编码规范

类似HTML，代码编写规范帮助程序员很好的规整和管理代码。这里介绍一些CSS编码的相关规范。

有效组织注释

CSS文件可以非常复杂，或许包含了几百行。这些巨大的文件可能会导致我们书写的样式非常难于编辑和查找。所以最好我们将样式组织在逻辑块中。

注意：尽量使用一些注释说明样式内容和相关逻辑模块，方便其它人理解

不符合编码规范

header { ... }
article { ... }
.btn { ... }

    符合编码规范

<pre name="code" class="html">/* Primary header */
header { ... }

/* Featured article */
article { ... }

/* Buttons */
.btn { ... }

使用多行书写代码和空格

书写CSS，最重要的是将每一个选择器和声明定义在一个新行。然后，每一个选择器需要缩放来申明。

为了方便其它人阅读，需要按指定的方式来书写CSS，下面是对比的例子：

    不符合编码规范

a,.btn{background:#aaa;color:#f60;font-size:18px;padding:6px;}

    符合编码规范

a,
.btn {
background: #aaa;
color: #f60;
font-size: 18px;
padding: 6px;
}

以上代码更清楚的定义了css相关样式，更符合阅读习惯

使用正确的类名称

类名或者值应该模块化，必须包含有效的说明元素相关内容，不是仅仅描述外观，类名称定义应该是小写，并且使用连字符号“-”

    不符合编码规范

.Red_Box { ... }

    符合编码规范

.alert-message { ... }

创建合适的选择器

CSS选择器如果不好好维护则可能会无法控制。太长或者太不清楚都不合适。

太长的选择器会导致层次太深入，而打断正常的层次结构导致不可预期的错误。

还有就是尽量不要使用ID来定义CSS中选择器，因为它们比较专注，会导致很多问题。

下面是对比例子：

    不符合编码规范

#aside #featured ul.news li a { ... }
#aside #featured ul.news li a em.special { ... }

    符合编码规范

.news a { ... }
.news .special { ... }

必要的时候使用指定的类定义

有些时候当CSS名太长的时候，有必要使用特定的类定义，因为层次太多需要你定义较多的代码。

举个例子，如果一个<em>元素签到到一个存在于<aside>元素中的<h1>元素，而以上这些元素都包含在<section>元素中，选择器有可能设计成为了"aside h1 em"，那么<em>元素即使移出<h1>元素，样式也不会发生变化，更好的解决方法是为<em>元素定义一个特定的类定义，比较代码如下：

    不符合编码规范

section aside h1 em { ... }

    符合编码规范

.text-offset { ... }

使用缩写属性和值

一个CSS的特性是能够使用缩写属性和值。 大多数的属性和值都支持缩写方式，例如，内外边距，这样书写能够有效的减少代码

    不符合编码规范

img {
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
}
button {
padding: 0 0 0 20px;
}

    符合编码规范

img {
margin: 5px 10px;
}
button {
padding-left: 20px;
}

使用缩写的16进制的颜色属性

在颜色属性值书写中，如果可以的化尽量使用3个字母缩写来设置颜色值，对比代码如下：

    不符合编码规范

.module {
background: #DDDDDD;
color: #FF6600;
}

    符合编码规范

.module {
background: #ddd;
color: #f60;
}

不书写0值相关单位

有时候，如果相关属性值为0的时候，尽量不书写单位，对比代码如下：

    不符合编码规范

div {
margin: 20px 0px;
letter-spacing: 0%;
padding: 0px 5px;
}

    符合编码规范

div {
margin: 20px 0;
letter-spacing: 0;
padding: 0 5px;
}

分组来管理浏览器相关兼容前缀

对于CSS3相关属性来说， 通常需要使用浏览器相关的兼容性前缀，这个时候务必保证书写的代码能够有效的组织（有效对齐和分组），不要随意的书写，下面是对比代码：

    不符合编码规范

div {
background: -webkit-linear-gradient(#a1d3b0, #f6f1d3);
background: -moz-linear-gradient(#a1d3b0, #f6f1d3);
background: linear-gradient(#a1d3b0, #f6f1d3);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

    符合编码规范

div {
background: -webkit-linear-gradient(#a1d3b0, #f6f1d3);
background:    -moz-linear-gradient(#a1d3b0, #f6f1d3);
background:         linear-gradient(#a1d3b0, #f6f1d3);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

小提示： 使用一些第三方类库，可以帮助我们书写不带有任何浏览器兼容性前缀的代码， 例如 prefixfree，更多请参考教程

模块化代码方便重用

尽量不要书写重复定义的样式， 学会设计可重用的代码结构，避免生成大量的冗余代码，下面是对比例子：

    不符合编码规范

.news {
background: #eee;
border: 1px solid #ccc;
border-radius: 6px;
}
.events {
background: #eee;
border: 1px solid #ccc;
border-radius: 6px;
}

    符合编码规范

.feat-box {
background: #eee;
border: 1px solid #ccc;
border-radius: 6px;
}