我们在键盘上留下的余温, 也将随时代传递到更远的将来


:D 获取中...

css 规范

代码格式化

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

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

一种是展开格式(Expanded)

1
2
3
4
.jdc {
  display: block;
  width: 50px;
}

团队约定

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

代码大小写

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

1
2
3
4
5
6
7
8
9
/* 推荐 */
.jdc {
  display: block;
}

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

代码连接符号

统一使用 - 连接代码

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 推荐 */
.jdc-top {
  display: block;
}

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

.jdcTop {
  display: block;
}

选择器

  • 尽量少用通用选择器 *
  • 不使用 ID 选择器
  • 不使用无具体语义定义的标签选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 推荐 */
.jdc {}

.jdc li {}

.jdc li p {}

/* 不推荐 */

* {}

#jdc {}

.jdc div {}

代码缩进

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

1
2
3
4
.jdc {
  width: 100%;
  height: 100%;
}

分号

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

1
2
3
4
.jdc {
  width: 100%;
  height: 100%;
}

代码易读性

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

推荐:

1
2
3
.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;
}

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

推荐:

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,.jdc-logo,.jdc-hd {
  color: #ff0;
}.nav{
  color: #fff;
}

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

推荐:

1
2
3
.jdc {
  color: #fff;
}

不推荐:

1
2
3
.jdc {
  color: #ffffff;
}

不要为 0 指明单位

推荐:

1
2
3
.jdc {
  margin: 0 10px;
}

不推荐:

1
2
3
.jdc {
  margin: 0px 10px;
}

属性值引号

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

1
2
3
4
5
6
7
8
9
/* 推荐 */
.jdc {
  font-family: 'Hiragino Sans GB';
}

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

属性书写顺序

建议遵循以下顺序:

  1. 布局定位属性:display / position / float / clear / visibility / overflow
  2. 自身属性:width / height / margin / padding / border / background
  3. 文本属性:color / font / text-decoration / text-align / vertical-align / white- space / break-word
  4. 其他属性(CSS3):content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.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;
}

mozilla 官方属性顺序推荐

CSS3 浏览器私有前缀写法

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

1
2
3
4
5
6
7
.jdc {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

更多关于浏览器私有前辍写法:#Vendor-specific extensions

注释规范

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.

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

单行注释

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

推荐:

1
2
3
4
5
6
7
/* Comment Text */
.jdc {
}

/* Comment Text */
.jdc {
}

不推荐:

1
2
3
4
5
6
7
8
/*Comment Text*/
.jdc {
  display: block;
}

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

模块注释

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

推荐:

1
2
3
4
5
6
7
/* Module A
---------------------------------------------------------------- */
.mod-a {}

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

不推荐:

1
2
3
4
5
/* Module A ---------------------------------------------------- */
.mod-a {}

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

文件信息注释

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

1
2
3
4
5
6
@charset "UTF-8";
/**
 * @desc File Info
 * @author Author Name
 * @date 2015-10-10
 */

更多关于 CSS 注释:#Comments

ACSS 「 原子化CSS 」


 上一页

Guidelines Html

 评论

 无法加载Disqus评论系统，请确保您的网络能够正常访问。