# 代码规范
# 层级
- z-index 不要使用123456这种 单位数增加，因为层级关系如果复杂的话 你将无法在3和4之间插入一个层，而且你还需要去改动所有的层级关系。
使用 1 9 10 11 99 100 101 这种位数递增
1
# 简写
- 代码书写顺序建议： 布局样式 > 自身样式 > 文本样式 > 其他样式
- 布局样式：position、display、float
- 自身样式：width、height、margin、padding、border、background
- 文本样式：text-align、text-indent、line-height、font、color
- 其他样式：content、cursor、border-radius、box-shadow
- 属性尽量使用简写形式，如font、padding、background 等
/* bad */
font-style: italic;
font-weight: bold;
font-size: .8em;
line-height: 1.2;
font-family: Arial, sans-serif;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
/* good */
font: italic bold .8em/1.2 Arial, sans-serif;
padding: 0 1em 2em;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 缩进
- 使用 2 个空格做为一个缩进层级， vscode设置Tab Size
.demo {
font-size: 18px;
line-height: 1.2;
}
1
2
3
4
2
3
4
# 空格
- 以下情况不需要空格:
- 属性名 与之后的 : 之间
- 多个规则的分隔符','前
- 行末不要有多余的空格
/* not good */
.demo {
color :red;
}
/* not good */
.demo ,
.dialog{
...
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
- 以下情况需要空格:
- 注释 (
/*)后和（*/) 前 - 选择器 与 { 之间必须包含空格。
- : 与 属性值 之间必须包含空格
- 选择器'>', '+', '~'前后
- 属性值 书写在简写时
/* good */
.demo {
...
}
/* good */
.demo {
margin: 0;
}
/* good */
.demo > .dialog {
...
}
/* good */
.demo {
font: italic bold .8em/1.2 Arial, sans-serif;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 换行
- 多个规则的分隔符(
,)后
/* good */
.user,
.list,
.content {
color: red;
}
/* bad */
.user, .list, .content {
color: red;
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
- 属性定义
/* good */
.demo {
margin: 0;
padding: 0;
}
/* bad */
.demo { margin: 0; padding: 0; }
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 分号
- 每个属性末尾后面都要加分号
.demo {
width: 20px;
height: 20px;
}
1
2
3
4
2
3
4
- 当数值为 0 - 1 之间的小数时，省略整数部分的 0。
/* good */
.demo {
opacity: .1;
}
/* bad */
.demo {
opacity: 0.1;
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
- 长度为 0 省略单位
/* bad */
margin: 0px;
/* bad */
margin: 0;
1
2
3
4
5
2
3
4
5
- 属性值十六进制数值能用简写的尽量用简写
/* bad */
.demo {
color: #ffffff;
}
/* good */
.demo {
color: #fff;
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 引号
- 统一使用双引号
/* bad */
a[href^='#'] {
background-color: gold;
}
/* good */
a[href^="#"] {
background-color: gold;
}
/* bad */
.demo:after {
content: ''
}
/* good */
.demo:after {
content: ""
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20