前端开发web应用的规范的作用两方面： 1) 代码一致性 2) 最佳实践。 通过保持代码风格一致，容易被理解和被维护。我们可以减少遗留系统维护的负担，并降低未来系统崩溃的风险。而通过遵照最佳实践，我们能确保优化的页面加载、性能以及可维护的代码。

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-repeat00;/* 可重复多次的属性，每次重复一行 */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;}

2.6 属性

[强制] 属性定义必须另起一行。 示例：

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

[强制] 属性定义后必须以分号结尾。 示例：

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

通用

3.1 选择器

[强制] 如无必要，不得为 id、class 选择器添加类型选择器进行限定。 解释： 在性能和维护性上，都有一定的影响。 示例：

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

3.2 属性缩写

[建议] 在可以使用缩写的情况下，尽量使用属性缩写。 示例：

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

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