一，在开始前先来讲一些基本概念，这里就直接引用 《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 浏览器访问 http://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（https://github.com/gemini-testing/gemini）项目是 Yandex 团队（https://www.yandex.com）开发的视觉回归测试工具。使用该工具，你可以编写脚本，自动截取网站在主流浏览器中的截图，然后将其与基准图像比较，不同之处将以高亮形式标记出来。
我们将通过下面的示例来学习如何用 Gemini 测试由 WebKit 渲染引擎渲染的界面。我们设置好让 Gemini 用无头浏览器 PhantomJS（http://phantomjs.org）访问网页。无头浏览器是指没有用户界面，为其他程序提供内容的 Web 浏览器。它不仅能够在不展示网页的情况下渲染页面、截图，还常用来为开发人员提供与浏览器交互的接口，使其能够向浏览器传递指令。
image安装 Gemini
安装 Gemini 之前，要先安装 Node.js 和 NPM。你可以从 https://nodejs.org 下载 Node.js。Gemini 安装指南请见 https://github.com/gemini-testing/gemini。下面示例需要安装 PhantomJS。你可以从 http://phantomjs.org 下载适合自己操作系统的 PhantomJS 二进制安装包。
Gemini 通过利用 Selenium 或 Sauce Labs 和 BrowserStack 之类的云端服务，还可以测试其他浏览器。详细方法请参考相关文档。
-
配置
安装 Gemini 之后，你需要在自己项目的根目录中创建名为 .gemini.js 的文件。该示例非常简单，按照例 5-1 配置即可。完整的配置项，请见 https://github.com/gemini-testing/gemini。
例 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（http://bbc-news.github.io/wraith/index.html）是由 BBC 开发的。它依赖于CasperJS、PhantomJS 或 SlimerJS、ImageMagick 和 Ruby。
PhantomCSS（https://github.com/Huddle/PhantomCSS）由 Huddle（http://huddle.com）公司的 James Cryer 带领开发团队编写。它依赖于 CasperJS 和 Resemble.JS，可以结合 PhantomJS 或 SlimerJS 使用。
