CSS代码规范

2019-05-24 本文已影响0人 Mica_马超

CSS代码规范

文档

CSS 文件使用无 BOM 的 UTF-8 编码。

使用 2 个空格做为一个缩进层级，不允许使用 4 个空格或 tab 字符。

每行不得超过 120 个字符，除非单行不可分割。

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

/* good */
.post,
.page,
.comment {
  line-height: 1.5;
}

/* bad */
.post, .page, .comment {
  line-height: 1.5;
}

属性选择器中的值必须用双引号包围。

不允许使用单引号，不允许不使用引号。

/* good */
article[character="juliet"] {
  voice-family: "Vivien Leigh", victoria, female
}

/* bad */
article[character='juliet'] {
  voice-family: "Vivien Leigh", victoria, female
}

属性定义必须另起一行。

/* good */
.selector {
  margin: 0;
  padding: 0;
}

/* bad */
.selector { margin: 0; padding: 0; }

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

/* good */
#username input {}
.comment .avatar {}

/* bad */
.page .header .login #username input {}
.comment div * {}

在可以使用缩写的情况下，尽量使用属性缩写。

/* good */
.post {
  font: 12px/1.5 arial, sans-serif;
}

/* bad */
.post {
  font-family: arial, sans-serif;
  font-size: 12px;
  line-height: 1.5;
}

属性书写顺序

同一 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 属性，应放在最前面。

.sidebar {
  /* formatting model: positioning schemes / offsets / z-indexes / display / ...  */
  position: absolute;
  top: 50px;
  left: 0;
  overflow-x: hidden;

  /* box model: sizes / margins / paddings / borders / ...  */
  width: 200px;
  padding: 5px;
  border: 1px solid #ddd;

  /* typographic: font / aligns / text styles / ... */
  font-size: 14px;
  line-height: 20px;

  /* visual: colors / shadows / gradients / ... */
  background: #f5f5f5;
  color: #333;
  -webkit-transition: color 1s;
  -moz-transition: color 1s;
  transition: color 1s;
}

清除浮动

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

float 非 none
position 非 static
overflow 非 visible

.clear:before,
.clear:after{
    content: " ";
    display: table;
}

.clear:after{
    clear: both;
}

尽量不使用 !important 声明。

必须注意的是，仅在设计上确实不允许任何其它场景覆盖样式时，才使用内联的 !important 样式。通常在第三方插件环境的应用中使用这种方案。

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

RGB颜色值必须使用十六进制记号形式 #rrggbb。不允许使用 rgb()。带有alpha的颜色信息可以使用 rgba()。使用 rgba() 时每个逗号后必须保留一个空格。

颜色值可以缩写时，必须使用缩写形式。

颜色值不允许使用命名色值。

颜色值中的英文字符采用小写。

必须同时给出水平和垂直方向的位置。

2D 位置初始值为 0% 0%，但在只有一个方向的值时，另一个方向的值会被解析为 center。为避免理解上的困扰，应同时给出两个方向的值。

/* good */
body {
  background-position: center top; /* 50% 0% */
}

/* bad */
body {
  background-position: top; /* 50% 0% */
}

字体族

font-family 属性中的字体族名称应使用字体的英文 Family Name，其中如有空格，须放置在引号中。

所谓英文 Family Name，为字体文件的一个元数据，常见名称如下：

字体	操作系统	Family Name
宋体 (中易宋体)	Windows	SimSun
黑体 (中易黑体)	Windows	SimHei
微软雅黑	Windows	Microsoft YaHei
微软正黑	Windows	Microsoft JhengHei
华文黑体	Mac/iOS	STHeiti
冬青黑体	Mac/iOS	Hiragino Sans GB
文泉驿正黑	Linux	WenQuanYi Zen Hei
文泉驿微米黑	Linux	WenQuanYi Micro Hei

h1 {
  font-family: "Microsoft YaHei";
}

font-family 按「西文字体在前、中文字体在后」、「效果佳 (质量高/更能满足需求) 的字体在前、效果一般的字体在后」的顺序编写，最后必须指定一个通用字体族( serif / sans-serif )。

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

font-weight 属性必须使用数值方式描述。

CSS 的字重分 100 – 900 共九档，但目前受字体本身质量和浏览器的限制，实际上支持 400 和 700 两档，分别等价于关键词 normal 和 bold。

line-height 在定义文本段落时，应使用数值。

将 line-height 设置为数值，浏览器会基于当前元素设置的 font-size 进行再次计算。在不同字号的文本段落组合中，能达到较为舒适的行间间隔效果，避免在每个设置了 font-size 都需要设置 line-height。

.container {
  line-height: 1.5;
}

属性前缀

带私有前缀的属性由长到短排列。

Hack

需要添加 hack 时应尽可能考虑是否可以采用其他方式解决。

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

尽量使用简单的属性 hack

.coldCity .top {
  top: 24px;
  top: 24px\0; /*ie9-11*/
  top/*\**/: 26px\9; /*ie8*/
}

CSS代码规范