一，在开始前先来讲一些基本概念，这里就直接引用《CSS重构：样式表性能调优》一书。此文主要是对于该书一些整理。便于后续在实战中遵循。

特指度度量的是 CSS 选择器识别元素的精确性。为选取元素，不同类型的选择器常组合在一起，计算特指度时需要分析这些选择器（除了通用选择器 *）。为 (a, b, c, d) 中的各个变量赋予相应的数值，就能得到特指度。

(1) 如果用 style 属性应用样式，则 a=1，否则 a=0。

(2) b 为 ID 选择器的数量。

(3) c 为类选择器、属性选择器和伪类的数量。

(4) d 为类型选择器和伪元素的数量。

以上各量计算完成后，这些量拼接起来可得到特指度。为具体理解，请思考例 2-1 中的选择器。

例 2-1　计算规则集的特指度

nav-global > ul > li > a.nav-link {

color: #000000;

}

用刚刚定义的算法，我们可以确定该选择器的特指度为 (0, 1, 1, 3)

比较选择器的特指度时，最左侧的选择器特指度最高。如果最左侧变量的两个值相等，需要比较右侧紧挨着的变量的值。举例来说，特指度 (1, 0, 0, 0) 高于 (0, 1, 1, 3)，同理，(0, 2, 1, 3) 高于 (0, 1 ,1, 3)。然而，特指度 (0, 1, 1, 3) 低于 (0, 1, 1, 4) 或 (0, 1, 2, 0)。

规则集顺序描述的是一个 CSS 规则集在样式表中的位置。如果两个声明块中的选择器特指度相同，且它们为同一元素的某个属性应用样式，那么在样式表中处于相对靠后位置的声明块中的属性优先级较高。
行内CSS和特指度
除非用 style 属性添加行内样式，否则特指度和规则集顺序决定为元素应用什么样式

用!important声明覆盖级联样式

二，对于上面概念理解和掌握后，来看看作者建议的如何写更优的样式

1.使用注释

CSS 只有块级注释（注释语句可以折行），注释以 /* 开始，以 / 结束。
若注释只需要一行，仍旧可以用块级注释，但是同样必须以 / 开始，以 */ 结束。下面来看几个注释的示例：

/* 主导航链接的样式。
**
** @see templates/_navigation.html
*/

.nav-link {
padding: 4px;
text-decoration: none;
}

2.结构一致的规则集规则集可以写到一行，也可以分作多行。

3.浏览器引擎前缀组织属性

把标准写法作为备用：
-ms-transform-origin: @origin;
-moz-transform-origin: @origin;
-webkit-transform-origin: @origin;
transform-origin: @origin;
这些属性的顺序非常重要，因为浏览器按照从上到下的顺序应用声明块的属性，它忽略无法识别的属性，应用能识别的属性。这表明将没有前缀的标准 CSS 属性放到添加有前缀的属性前面，可能导致在两者都支持的浏览器上前者被后者覆盖。

4.保持选择器的简单
将多种不同的选择器和结合符写到一起形成的选择器非常复杂。然而，选择器能够做到非常精确，并不意味着它们就应该很精确。
如
<style type="text/css">
div > nav > ul > li > a {
color: #1200FF;
}
</style>
所用的选择器高度依赖页面的 HTML 结构。一旦 HTML 结构改变，目标样式将不起作用。因此更佳的做法是为 HTML 元素增加一个类，并为该类增加样式.

简单的选择器比起复杂的选择器性能更高.

从右向左匹配选择器

Web 浏览器需要快速选择并为元素应用样式，以便尽快为用户提供可用的网页。浏览器从右向左匹配选择器，因此它能够忽略前面不匹配的元素，而不必把时间浪费到确认元素是否匹配上。

关键选择器

例 3-9 中的选择器，选择的是祖先元素为 <body> 标签的任意元素。从右向左解析该选择器，能够选择页面的每个元素，并向上回溯查看它是否有个 <body> 祖先元素。该选择器效率极低，因为几乎每个可见元素都是 <body> 元素的后代。

例 3-9　以 body 为祖先元素的通用选择器

body * {
font-size: 12px;
}
正如前面讲过的，浏览器从右向左匹配元素，因此它能够及时排除与选择器不匹配的元素。选择器最右边的部分叫作关键选择器，例 3-9 是以通用选择器 * 作为关键选择器的。

单独使用通用选择器为所有元素（* {} ）应用样式，浏览器可以很快完成渲染工作，因为它只需要匹配页面的每个元素。然而，当通用选择器与另一个选择器和结合符（例 3-9 中的祖先选择器）配合使用时，浏览器匹配合适的元素所做的工作要更多。只使用通用选择器，不要将其与结合符和其他选择器配合使用可以解决该问题

5.分离CSS和JavaScript

在JavaScript中使用带前缀的类和ID

，在只用于 JavaScript 的类和 ID 前添加 js-。例如，如果我们要在 JavaScript 中选择与政策相关的一组选项卡，那么可以用 js-tab-group-policies 作为 ID。只用添加了 js- 前缀的类和 ID 作为 JavaScript 选择器，就可以消除 JavaScript 和 CSS 之间的依赖关系。

用类修改元素样式

若要修改 HTML 元素样式，不要用 JavaScript 添加 style 属性，而是应该为元素增加或删除类。这样不仅可以应用合适的样式，该元素的 CSS 样式集也能跟其余的网站 CSS 合理地组织在一起

三审查CSS进一步优化

CSS Dig 是 Google Chrome 浏览器的一款免费插件，你可以用它获取到以上信息。用 Chrome 浏览器访问 cssdig.com安装该插件。安装完成后，其图标（图 6-1）将显示在已安装的浏览器插件旁边。

图 6-1：CSS Dig 插件图标

CSS Dig 的使用方法是访问目标网站，点击 CSS Dig 图标，然后弹出一个模态窗口，其中显示的是可以分析的 CSS 源文件和无法分析的文件（图 6-2）。

{%}

图 6-2：CSS Dig 模态窗口

点击模态窗口的“START DIGGING”按钮，CSS Dig 开始分析 CSS。这时将出现另一个含有两个页卡（Properties 和 Selectors）的模态窗口，它列出了这两个主题的详细信息（图 6-3）。

{%}

图 6-3：CSS Dig 属性页卡

1.删除僵尸代码
2.分离基础样式
将基础样式分为以下不同类别：

标题（<h1> – <h6>）
文本（例如：<p>、<fig> 和 <code>）
超链接（<a>）
列表（<dl>、<ol> 和 <ul>）
表单（例如：<form>、<legend>、、<input> 和 <button>）
表格（例如：<table>、<thead>、<tbody>、<tfoot>、<tr> 和 <td>）
媒体（例如：<audio>、<object> 和 <video>）
分完类之后，你可以用 CSS Dig 寻找某一特定类别的选择器。找到选择器的使用频率和使用位置之后，你可以对它们进行比较，看看哪个属性更常用。如果一个类型选择器单独使用，且只用过一次，就可以放心将其删除。然而，如果一个类型选择器用过多次，请按以下步骤重构。

(1) 对于样式要予以重构的类型选择器，在基础样式中新建一条规则集。

(2) 从所有用到该类型选择器的地方找到最常用的属性，将其添加到新规则集中。

(3) 从其他规则集删除重复的属性，因为它们可以继承新定义的基础样式。

3.删除冗余的ID

4.将ID转化为类

5.删除行内CSS和过于模块化的类

四关于样式测试

这里提下视觉回归测试

Gemini（github.com/gemini-test…）项目是 Yandex 团队（www.yandex.com）开发的视觉回归测试工具。使用该工具，你可以编写脚本，自动截取网站在主流浏览器中的截图，然后将其与基准图像比较，不同之处将以高亮形式标记出来。

我们将通过下面的示例来学习如何用 Gemini 测试由 WebKit 渲染引擎渲染的界面。我们设置好让 Gemini 用无头浏览器 PhantomJS（phantomjs.org）访问网页。无头浏览器是指没有用户界面，为其他程序提供内容的 Web 浏览器。它不仅能够在不展示网页的情况下渲染页面、截图，还常用来为开发人员提供与浏览器交互的接口，使其能够向浏览器传递指令。

image
安装 Gemini

安装 Gemini 之前，要先安装 Node.js 和 NPM。你可以从 nodejs.org 下载 Node.js。Gemini 安装指南请见 github.com/gemini-test…。下面示例需要安装 PhantomJS。你可以从 phantomjs.org 下载适合自己操作系统的 PhantomJS 二进制安装包。

Gemini 通过利用 Selenium 或 Sauce Labs 和 BrowserStack 之类的云端服务，还可以测试其他浏览器。详细方法请参考相关文档。

配置

安装 Gemini 之后，你需要在自己项目的根目录中创建名为 .gemini.js 的文件。该示例非常简单，按照例 5-1 配置即可。完整的配置项，请见 github.com/gemini-test…。

例 5-1　Gemini 配置文件
```
module.exports = {
    rootUrl: 'http://127.0.0.1:8000',
    browsers: {
        phantomjs: {
            desiredCapabilities: {
                browserName: 'phantomjs'
            }
        }
    }
};
```
上述代码告诉 Gemini，网站的根目录地址为 http://127.0.0.1:8000。设定好根目录地址后，正如下一节要讲到的，我们编写测试代码指定 URL 时，可使用相对于根目录地址的相对路径。上述代码还告诉 Gemini，我们将使用 PhantomJS 浏览器截取图像，并将其保存到名为 phantomjs 的文件夹中。若用多个浏览器进行测试，将有助于区分屏幕截图来自哪个浏览器。
测试

接下来，你需要编写测试文件。Gemini 有自己的一套函数，这些函数能够完成打开 URL、选择特定元素、操纵窗口和截图等操作。如要深入了解这些功能，请阅读其文档。该例中，我们将使用例 5-2 所示的代码。

例 5-2　Gemini 测试代码文件
```
gemini.suite('animals', function(suite) {
    suite.setUrl('/')
        .setCaptureElements('.animal')
        .capture('plain')
});
```
上述代码相当直接。首先，声明一个测试任务，并为其起一个名字（该例使用“animals”）。然后，定义一个要执行的函数，函数体为测试步骤。用 setUrl 函数指定网站的首页（/）为要打开的页面。接着，用 .setCaptureElements 函数选择要测试的元素。最后，用 .capture 函数截图。
采集基准图像

测试之前，我们需要采集基准图像，Gemini 将对比新截取的图像和基准图像之间的差别。要采集基准图像，需要在终端运行 PhantomJS 和 Gemini。

打开一个终端窗口，输入命令 phantomjs--webdriver=4444。参数 --webdriver=4444 将在端口 4444 以 WebDriver 模式运行 PhantomJS。Gemini 使用该端口与浏览器进行交互。

接着，另起一个终端窗口，进入到 .gemini.js 文件所在目录，执行命令 gemini update tests/gemini/animal-tests.js，采集基准图像（animal-tests.js 为我们刚才编写的测试文件，它位于 tests/gemini 目录下）。采集完基准图像，将其存储于新目录 gemini/screens/animals/plain 下的 phantomjs.png 文件中。该例只采集一个基准图像文件，如图 5-18 所示。
{%}
图 5-18：基准图像
测试回归

采集到基准图像之后，就可以测试回归情况了。因为要测试的代码是一段正确无误的新代码，所以为了讲解测试方法，我们将对代码做简单的改动。改动了我们要测试的 CSS 组件的代码后，用命令 gemini test --reporter html tests/gemini/animal-tests.js 运行 Gemini。该命令要求 Gemini 运行测试，比较前后两次的截图，输出对比结果为 HTML 页面，该页面存储在 gemini-report/index.html 中。打开该文件，将看到测试结果（图 5-19）。
{%}
图 5-19：Gemini 报告

Gemini 生成的报告，既是对测试结果的总结，也展示了测试时使用的截图。由图 5-19 可见，两幅图的差别非常大，但是通过分析基准图像和现有图像，我们可以发现实际上是字体方面的问题，引起了组件尺寸的变化。

Gemini 的替代方案

除了 Gemini，还有多种视觉回归测试工具，其中最常用的两个是 Wraith 和 PhantomCSS。这两个测试工具的设计理念非常类似，它们能打开网站，能用 PhantomJS（基于 WebKit 的无头浏览器）或 SlimerJS（基于Gecko 的无头浏览器）截图，能对比网页现有元素的截图跟元素基准图像之间的差异。

Wraith（bbc-news.github.io/wraith/inde…）是由 BBC 开发的。它依赖于CasperJS、PhantomJS 或 SlimerJS、ImageMagick 和 Ruby。

PhantomCSS（github.com/Huddle/Phan…）由 Huddle（huddle.com）公司的 James Cryer 带领开发团队编写。它依赖于 CasperJS 和 Resemble.JS，可以结合 PhantomJS 或 SlimerJS 使用。

CSS重构：样式表性能调优-整理总结

nav-global > ul > li > a.nav-link {