3. 通用

3.1 选择器

【强制】 如无必要，不得为id、class选择器添加 类型选择器 进行限定；

在性能和维护性上，都有一定的影响。

示例：

/* Not so great */
dialog# error,
p.danger-message {
    font-color: # c00;
}
/* Better */
# error,
.danger-message {
    font-color: # c00;
}

【建议】 选择器的嵌套层级应该不大于 3 级，位置靠后的限定条件应可能精确；

在性能和维护性上，都有一定的影响。

示例：

/* Not so great */
.comment ul li a span {}
# top-hero .hero-avatar li.avatar .pic em {}
/* Better */
.comment .date {}
# top-hero .pic em {}

3.2 属性

3.2.1 属性书写顺序

【建议】 同一 rule set 下的属性在书写时，应按功能进行分组，并以 Formatting Model > Box Model > Typographic > Visual 的顺序书写，以提高代码的可读性。

1. Positioning Model 布局方式、位置；相关属性包括：position / top / right / bottom / left / z-index / display / float / ...
2. Box model 盒模型；相关属性包括：width / height / padding / margin / border / overflow / ...
3. Typographic 文本排版；相关属性包括：font / line-height / text-align / word-wrap / ...
4. Visual 视觉外观；相关属性包括：color / background / list-style / transform / animation / transition / ...
5. 如果包含 content 属性，应放在最前面；

Positioning 处在第一位，因为他可以使一个元素脱离正常文本流，并且覆盖盒模型相关的样式。盒模型紧跟其后，因为他决定了一个组件的大小和位置。其他属性只在组件 内部 起作用或者不会对前面两种情况的结果产生影响，所以他们排在后面。

详情资料 Twitter的strictPropertyOrder

3.2.2 属性引号

【强制】 属性选择器中的值必须用双引号包围。不允许使用单引号，不允许不使用引号。

示例：

/* Not so great */
article[character='juliet'] {
    voice-family: "Vivien Leigh", victoria, female
}
/* Better */
article[character="juliet"] {
    voice-family: "Vivien Leigh", victoria, female
}

3.2.3 属性简写

简写形式可以在一定程度上压缩样式，但并不意味着你可以对所有可以简写的属性声明都使用简写。过度使用简写形式的属性声明会导致代码混乱，会对属性值带来不必要的覆盖从而引起意外的副作用，并且不能充分利用CSS的继承。常见的滥用简写属性声明的情况如下：

• padding
• margin
• font
• background
• border
• border-radius

如果你只需定义其中的一两个属性，而不是全部，尽量分开来写：

/* Better */
.selector {
    margin-bottom: 10px;
    background-color: red;
    background-image: url(image.jpg);
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
/* Not so great */
.selector {
    margin: 0 0 10px;
    background: red;
    background: url(image.jpg);
    border-radius: 3px 3px 0 0;
}

[⬆]