css书写规范

发表于 | 分类于 ， ， | 阅读次数:

css书写规范

空格规范

「强制」选择器与 { 之间必须包含空格。
示例：

1
2
.selector {
}

「强制」属性名与之后的 : 之间不允许包含空格，: 与属性值之间必须包含空格。
示例：

1
font-size: 12px;

选择器规范

「强制」并集选择器，每个选择器声明必须独占一行。
示例：

1
2
3
4
5
6
7
8
9
10
11
/* good */
.post,
.page,
.comment {
    line-height: 1.5;
}

/* bad */
.post, .page, .comment {
    line-height: 1.5;
}

「建议」一般情况下，选择器的嵌套层级应不大于3级，位置靠后的限定条件应尽可能精确。
示例：

1
2
3
4
5
6
7
/* good */
#username input {}
.comment .avatar {}

/* bad */
.page .header .login input {}
.comment div * {}

属性规范

「强制」属性定义必须另起一行。
示例：

1
2
3
4
5
6
7
8
/* good */
.selector {
    margin: 0;
    padding: 0;
}

/* bad */
.selector { margin: 0; padding: 0; }

「强制」属性定义后必须以分号结束。
示例：

1
2
3
4
5
6
7
8
9
/* good */
.selector {
    margin: 0;
}

/* bad */
.selector {
    margin: 0
}