前端工程化详解

# 书写风格

# 代码缩进

统一使用Tab（两个空格）进行代码缩进

.mod-example {
  padding-left: 15px;
}

成功
1
2
3

# 代码格式化

样式书写统一采用展开格式

.mod-example {
  padding-left: 15px;
}

成功
1
2
3

# 代码大小写

样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。

/* bad */
.mod-example {
  display:block;
}

/* good */
.mod-example {
  DISPLAY:BLOCK;
}

成功
1
2
3
4
5
6
7
8
9

# 分号

每个属性声明末尾都要加分号；

/* bad */
.mod-example {
  display:block
}

/* good */
.mod-example {
  display:block;
}

成功
1
2
3
4
5
6
7
8
9

# 逗号

逗号分隔的取值，逗号之后一个空格

/* bad */
.mod-example {
  box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
}

/* good */
.mod-example {
  box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}

成功
1
2
3
4
5
6
7
8
9

# 属性值引号

css属性值需要用到引号时，统一使用单引号

/* bad */
.mod-example { 
	font-family: "Hiragino Sans GB";
}

/* good */
.mod-example { 
	font-family: 'Hiragino Sans GB';
}

成功
1
2
3
4
5
6
7
8
9

# 颜色取值

应避免16进制表示法与rgb表示法混用的情况，并优先使用16进制表示法

/* bad */
.example-part1 {
  color: #efefef;
}
.example-part2 {
  color: rgb(252, 252, 252);
}
 
/* good */
.example-part1 {
  color: #efefef;
}
.example-part2 {
  color: #fcfcfc;
}

成功
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在可能的情况下，使用 3 个字符的十六进制表示法，并始终使用小写的十六进制数字

/* bad */
.mod-example {
  color: #cccccc;
  background-color: #efefef;
}
 
/* good */
.mod-example {
  color: #ccc;
  background-color: #efefef;
}

成功
1
2
3
4
5
6
7
8
9
10
11

# 在每个声明块的左花括号前添加一个空格

/* bad */
.mod-example{
  padding-left: 15px;
}

/* good */
.mod-example {
  padding-left: 15px;
}

成功
1
2
3
4
5
6
7
8
9

# 声明块的右花括号应当单独成行

/* bad */
.mod-example {
  padding-left: 15px;}

/* good */
.mod-example {
  padding-left: 15px;
}

成功
1
2
3
4
5
6
7
8

# 每条声明语句的 : 后应该插入一个空格，前面无空格

/* bad */
.mod-example {
  padding-left:15px;
}

/* good */
.mod-example {
  padding-left: 15px;
}

成功
1
2
3
4
5
6
7
8
9

# 数字

不要为 0 指明单位

/* bad */
.mod-example {
  padding: 0px 10px;
}

/* good */
.mod-example {
  padding: 0 10px;
}

成功
1
2
3
4
5
6
7
8
9

使用到小数时，省略前边的 0

/* bad */
.mod-example {
  opacity: 0.5;
}
 
/* good */
.mod-example {
  opacity: .5;
}

成功
1
2
3
4
5
6
7
8
9

# 为选择器分组时，将单独的选择器单独放在一行

/* bad */
.selector, .selector-secondary {
  padding-left: 15px;
}
 
/* good */
.selector,
.selector-secondary {
  padding-left: 15px;
}

成功
1
2
3
4
5
6
7
8
9
10

建议

选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。

← 重置样式 →