前端-业务场景4

5. 关于样式规范统一化的实现

参考答案：

css 指层叠样式表 (Cascading Style Sheets)，定义如何显示 html 元素，但由于 css 天生全局性，随着项目复杂度增加，极易出现样式覆盖以及其它的问题。

1. 通用规范

文件编码

• 为了避免内容乱码，统一使用 UTF-8 编码保存。
• 样式文件第一行设置字符集为 UTF-8

@charset 'UTF-8'; /* 注意字符集说明应在第一行 */

缩进规范

统一使用两个空格缩进

2. 初始化规范

各[浏览器]厂商的初始样式都不一样，为了消除不同[浏览器]对 [html]文本呈现的差异，我们常引入一些初始化样式，如 normalize.css、reset.css 等，当对于这些样式的引入我们需要注意下面几种情况：

• 不使用 UI [框架]，由零开始搭建 从零开始搭建的情况下，进行样式初始化，在项目最开始的时候就引入，不要在开发中途引入，避免不可预知的样式冲突。
• 不使用 UI [框架]，但使用了部分插件 插件往往都带有自己特有的样式，如富文本插件，在开发中途使用初始化样式有可能导致样式错乱，所以不建议大范围的初始化，只需简单进行初始化即可。

* {
  padding: 0;
  margin: 0;
}

• 已使用 UI 框架 在明确知道需要使用 UI 框架的时候，不使用第三方初始化样式，不管是在项目开始前还是进行中，因为 UI 框架一般都自带初始化，额外引入了反而会影响原有效果。

3. 代码规范

命名规范

class 应以功能或内容命名，不以表现形式命名 class 与 id 单词字母小写，多个单词组成时，采用中划线-分隔 使用唯一的 id 作为 JavaScript hook, 同时避免创建无样式信息的 class

代码风格

统一使用展开格式，不推荐紧凑格式

/* 展开格式 */
.test {
  color: red;
  font-size: 12px;
}

/* 紧凑格式 */
.test {
  color: red;
  font-size: 12px;
}

统一两个空格缩进

属性声明结尾加分号

选择器与左括号之间一个空格，属性冒号后一个空格

/* 推荐 */
.test {
  color: red;
  font-size: 12px;
}

/* 不推荐 */
.test {
  color: red;
  font-size: 12px;
}

不要为 0 指明单位

颜色值和属性值十六进制数值能用简写的尽量用简写

/* 推荐 */
.test {
  color: #fff;
}

/* 不推荐 */
.test {
  color: #ffffff;
}

引号使用

url() 、属性选择符、属性值使用单引号。

清除浮动

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

触发 BFC 的方式很多，常见的有：

float 非 none
position 非 static
overflow 非 visible

字体规范

对外商用网站，不要用font-face引入微软雅黑字体，避免侵权（包括图片内容）

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

网站上使用 微软雅黑 字体有三种形式：

1、【侵权】图片中使用 微软雅黑 字体，比如网站头图
2、【安全】网站 CSS 用 font-family 声明网站使用 微软雅黑 字体，比如文章标题和正文
3、【侵权】网站通过 font-face 引用 微软雅黑 ，这种方式不常见

选择器规范

在严格遵照BEM(Block Element Modifier)时，建议只使用类选择器，但 BEM 书写麻烦，所以建议如下

• 禁用通用选择器 *
• 不使用无具体语义定义的标签选择器

属性顺序

CSS 属性顺序是 CSS 良好编码风格的一部分，有助于提高代码可读性，便于发现代码问题，有利于团队合作，但在项目中发现部分同学在书写属性顺序时较为随意，想到一个属性就写一个。

建议使用下列顺序进行书写

1. 定位属性（position、display、float、left、right）
2. 尺寸属性（width、height、padding、margin、border）
3. 字体属性（color、font、text-align）
4. 其他属性（background、cursor、outline）

目的是