CSS编码规范

选择器

选择器{ 之间必须包含空格。属性名 与之后的 : 之间不允许包含空格, : 与 属性值 之间必须包含空格。

1
2
3
.selector {
margin: 0;
}

当一个 rule 包含多个 selector 时,每个选择器声明必须独占一行。

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

如无必要,不得为 id、class 选择器添加类型选择器进行限定。在性能和维护性上,都有一定的影响。

1
2
3
4
5
6
7
8
9
10
11
/* good */
#error,
.danger-message {
font-color: #c00;
}

/* bad */
dialog#error,
p.danger-message {
font-color: #c00;
}

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

属性书写顺序

同一 rule set 下的属性在书写时,应按功能进行分组,并以 Formatting Model(布局方式、位置) > Box Model(尺寸) > Typographic(文本相关) > Visual(视觉效果) 的顺序书写,以提高代码的可读性。

  • Formatting Model 相关属性包括:position / top / right / bottom / left / float / display / overflow
  • Box Model 相关属性包括:border / margin / padding / width / height
  • Typographic 相关属性包括:font / line-height / text-align / word-wrap
  • Visual 相关属性包括:background / color / transition / list-style

另外,如果包含 content 属性,应放在最前面。

通用

当元素需要撑起高度以包含内部的浮动元素时,通过对伪类设置 clear 或触发 BFC 的方式进行 clearfix。尽量不使用增加空标签的方式。

尽量不使用 !important 声明。需要强制指定样式且不允许任何场景覆盖时,通过标签内联和 !important 定义样式。

在可控环境下,期望显示在最上层的元素,z-index 指定为 999999。在第三方环境下,期望显示在最上层的元素,通过标签内联和 !important,将 z-index 指定为 2147483647

url() 函数中的路径不加引号。

1
2
3
body {
background: url(bg.png);
}

RGB颜色值必须使用十六进制记号形式 #rrggbb。不允许使用 rgb()。颜色值不允许使用命名色值。

文本编排

font-family 属性中的字体族名称应使用字体的英文 Family Name,其中如有空格,须放置在引号中。font-family 按「西文字体在前、中文字体在后」、「效果佳 (质量高/更能满足需求) 的字体在前、效果一般的字体在后」的顺序编写,最后必须指定一个通用字体族( serif / sans-serif )。

1
2
3
4
5
6
7
8
9
/* Display according to platform */
.article {
font-family: Arial, sans-serif;
}

/* Specific for most platforms */
h1 {
font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft YaHei", sans-serif;
}

需要在 Windows 平台显示的中文内容,其字号应不小于 12px

需要在 Windows 平台显示的中文内容,不要使用除 normal 外的 font-style。其他平台也应慎用。

font-weight 属性必须使用数值方式描述。但目前受字体本身质量和浏览器的限制,实际上支持 400700 两档,分别等价于关键词 normalbold

line-height 在定义文本段落时,应使用数值。当 line-height 用于控制垂直居中时,还是应该设置成与容器高度一致。

变换与动画

尽可能在浏览器能高效实现的属性上添加过渡和动画。

在可能的情况下应选择这样四种变换:

  • transform: translate(npx, npx); 移动
  • transform: scale(n):2D 缩放转换
  • transform: rotate(ndeg); 2D 旋转
  • opacity: 0..1:不透明级别

兼容性

带私有前缀的属性由长到短排列,按冒号位置对齐。

1
2
3
4
5
.box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

尽量使用 选择器 hack 处理兼容性,而非 属性 hack

参考

CSS编码规范

坚持原创技术分享,您的支持将鼓励我继续创作!