CSS代码规范

空格

• 选择器 与 { 之间必须包含空格。
• 列表型属性值 书写在单行时，, 后必须跟一个空格。
• 属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。
  margin: 0;

、+、~ 选择器的两边各保留一个空格。

选择器

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

/* good */

.post,

.page,

.comment {

line-height:1.5;

}

/* bad */

.post,.page,.comment {

line-height:1.5;

}

 

• 如无必要，不得为 id、class 选择器添加类型选择器进行限定。
• 选择器的嵌套层级应不大于 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 等

清楚浮动

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

值与单位

• url() 函数中的路径不加引号。
• font-family

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

h1 {

font-family:"Helvetica Neue",Arial,"Hiragino Sans GB","WenQuanYi Micro Hei","Microsoft YaHei", sans-serif;

}

 

 

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

兼容性

• 尽量使用简单的 属性 hack。

.box {

_display:inline;/* fix double margin */

float: left;

margin-left:20px;

}

.container {

overflow: hidden;

*zoom:1;/* triggering hasLayout */

}

 

来自为知笔记(Wiz)