web项目开发 之 前端规范 --- CSS编码规范

    此文严格按照W3C规范和部分实际项目可读性，浏览器加载，性能等众多属性权衡，做出平时前端编码规范

文档。供广大web工作者参考并实施，对维护和项目扩展升级都能省时省力。

转载请注明出处；JS前端实用开发QQ群 ：147250970  欢迎加入~！

CSS编码规范

1 前言

2 代码风格

　　2.1 文件

　　2.2 缩进

　　2.3 空格

　　2.4 行长度

　　2.5 选择器

　　2.6 属性

3 通用

　　3.1 选择器

　　3.2 属性缩写

　　3.3 属性书写顺序

　　3.4 清除浮动

　　3.5 !important

　　3.6 z-index

4 值与单位

　　4.1 文本

　　4.2 数值

　　4.3 url()

　　4.4 长度

　　4.5 颜色

　　4.6 2D 位置

5 文本编排

　　5.1 字体族

　　5.2 字号

　　5.3 字体风格

　　5.4 字重

　　5.5 行高

6 变换与动画

7 响应式

8 兼容性

　　8.1 属性前缀

　　8.2 Hack

　　8.3 Expression

1 前言

CSS 作为网页样式的描述语言，在百度一直有着广泛的应用。本文档的目标是使 CSS 代码风格保持一致，容易被理解和被维护。

虽然本文档是针对 CSS 设计的，但是在使用各种 CSS 的预编译器(如 less、sass、stylus 等)时，适用的部分也应尽量遵循本文档的约定。

2 代码风格

2.1 文件

[建议] CSS 文件使用无 BOM 的 UTF-8 编码。

解释：

UTF-8 编码具有更广泛的适应性。BOM 在使用程序或工具处理文件时可能造成不必要的干扰。

2.2 缩进

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

示例：

.selector {
    margin: 0;
    padding: 0;
}

2.3 空格

[强制] 选择器 与 {  之间必须包含空格。

示例：

.selector {
}

[强制] 属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。

示例：

margin: 0;

[强制] 列表型属性值 书写在单行时，, 后必须跟一个空格。

示例：

font-family: Arial, sans-serif;

2.4 行长度

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

解释：

常见不可分割的场景为URL超长。

[建议] 对于超长的样式，在样式值的 空格 处或 , 后换行，建议按逻辑分组。

示例：

/* 不同属性值按逻辑分组 */
background:
    transparent url(aVeryVeryVeryLongUrlIsPlacedHere)
    no-repeat 0 0;

/* 可重复多次的属性，每次重复一行 */
background-image:
    url(aVeryVeryVeryLongUrlIsPlacedHere)
    url(anotherVeryVeryVeryLongUrlIsPlacedHere);

/* 类似函数的属性值可以根据函数调用的缩进进行 */
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.04, rgb(88,94,124)),
    color-stop(0.52, rgb(115,123,162))
);

2.5 选择器

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

示例：

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

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

[强制] >、+、~ 选择器的两边各保留一个空格。

示例：