css 编码指南

# css 规范

# 代码格式化

样式书写一般有两种: 一种是紧凑格式(Compact)

.jdc{display: block;width: 50px;}

一种是展开格式(Expanded)

.jdc {
  display: block;
  width: 50px;
}

1
2
3
4

团队约定

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

# 代码大小写

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

/* 推荐 */
.jdc {
  display: block;
}

/* 不推荐 */
.JDC {
  display: BLOCK;
}

1
2
3
4
5
6
7
8
9

# 代码连接符号

统一使用 - 连接代码

/* 推荐 */
.jdc-top {
  display: block;
}

/* 不推荐 */
.jdc_top {
  display: block;
}

.jdcTop {
  display: block;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

# 选择器

尽量少用通用选择器 *
不使用 ID 选择器
不使用无具体语义定义的标签选择器

/* 推荐 */
.jdc {}

.jdc li {}

.jdc li p {}

/* 不推荐 */

* {}

#jdc {}

.jdc div {}

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

# 代码缩进

统一使用两个空格进行代码缩进, 使得各编辑器表现一致(各编辑器有相关配置)

.jdc {
  width: 100%;
  height: 100%;
}

1
2
3
4

# 分号

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

.jdc {
  width: 100%;
  height: 100%;
}

1
2
3
4

# 代码易读性

左括号与类名之间一个空格, 冒号与属性值之间一个空格

推荐:

.jdc {
  width: 100%;
}

1
2
3

不推荐:

.jdc{
  width:100%;
}

1
2
3

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

推荐:

.jdc {
  box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}

1
2
3

不推荐:

.jdc {
  box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
}

1
2
3

为单个 css 选择器或新申明开启新行

推荐:

.jdc,
.jdc-logo,
.jdc-hd {
  color: #ff0;
}

.nav {
  color: #fff;
}

1
2
3
4
5
6
7
8
9

不推荐:

.jdc,.jdc-logo,.jdc-hd {
  color: #ff0;
}.nav{
  color: #fff;
}

1
2
3
4
5

属性值十六进制数值能用简写的尽量用简写

推荐:

.jdc {
  color: #fff;
}

1
2
3

不推荐:

.jdc {
  color: #ffffff;
}

1
2
3

不要为 0 指明单位

推荐:

.jdc {
  margin: 0 10px;
}

1
2
3

不推荐:

.jdc {
  margin: 0px 10px;
}

1
2
3

# 属性值引号

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

/* 推荐 */
.jdc {
  font-family: 'Hiragino Sans GB';
}

/* 不推荐 */
.jdc {
  font-family: "Hiragino Sans GB";
}

1
2
3
4
5
6
7
8
9

# 属性书写顺序

建议遵循以下顺序:

布局定位属性:display / position / float / clear / visibility / overflow
自身属性:width / height / margin / padding / border / background
文本属性:color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他属性(CSS3):content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient ...

.jdc {
  display: block;
  position: relative;
  float: left;
  width: 100px;
  height: 100px;
  margin: 0 10px;
  padding: 20px 0;
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  color: #333;
  background: rgba(0, 0, 0, 0.5);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

mozilla 官方属性顺序推荐 (opens new window)

# CSS3 浏览器私有前缀写法

CSS3 浏览器私有前缀在前, 标准前缀在后

.jdc {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

1
2
3
4
5
6
7

更多关于浏览器私有前辍写法:#Vendor-specific extensions (opens new window)

# 注释规范

CSS 注释规范写法应该遵循以下标准:

Comments begin with the characters /* and end with the characters */ . They may occur anywhere outside other tokens, and their contents have no influence on the rendering. Comments may not be nested.

注释以字符 /* 开始, 以字符 */ 结束
注释不能嵌套

/*Comment Text*/

# 单行注释

注释内容第一个字符和最后一个字符都是一个空格字符, 单独占一行, 行与行之间相隔一行

推荐:

/* Comment Text */
.jdc {
}

/* Comment Text */
.jdc {
}

1
2
3
4
5
6
7

不推荐:

/*Comment Text*/
.jdc {
  display: block;
}

.jdc {
  display: block;/*Comment Text*/
}

1
2
3
4
5
6
7
8

# 模块注释

注释内容第一个字符和最后一个字符都是一个空格字符, /* 与模块信息描述占一行, 多个横线分隔符 - 与 */ 占一行, 行与行之间相隔两行

推荐:

/* Module A
---------------------------------------------------------------- */
.mod-a {}

/* Module B
---------------------------------------------------------------- */
.mod-b {}

1
2
3
4
5
6
7

不推荐:

/* Module A ---------------------------------------------------- */
.mod-a {}

/* Module B ---------------------------------------------------- */
.mod-b {}

1
2
3
4
5

# 文件信息注释

在样式文件编码声明 @charset 语句下面注明页面名称、作者、创建日期等信息

@charset "UTF-8";
/**
 * @desc File Info
 * @author Author Name
 * @date 2015-10-10
 */

1
2
3
4
5
6

更多关于 CSS 注释:#Comments (opens new window)

# ACSS 「原子化CSS 」 (opens new window)

编辑

#Css #Guidelines

上次更新: 11/12/2020, 6:27:50 AM

← html 编码指南 CSS3 的 calc 使用→

css 编码指南

# css 规范

# 代码格式化

# 代码大小写

# 代码连接符号

# 选择器

# 代码缩进

# 分号

# 代码易读性

# 属性值引号

# 属性书写顺序

# CSS3 浏览器私有前缀写法

# 注释规范

# 单行注释

# 模块注释

# 文件信息注释

# ACSS 「 原子化CSS 」 (opens new window)

# ACSS 「原子化CSS 」 (opens new window)