空格
- 选择器 与 { 之间必须包含空格。
- 列表型属性值 书写在单行时,, 后必须跟一个空格。
- 属性名 与之后的 : 之间不允许包含空格, : 与 属性值 之间必须包含空格。
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 */
}
时间: 2024-10-11 04:31:27