浅谈CSS重构样式表性能

本文是读《CSS重构：样式表性能调优》一书的笔记及个人见解

什么情况下重构

结合代码的上下文重构代码会更加的容易。所以，如果是修复bug，或者开发新的功能时用到了已有的代码，觉得有可变动的空间，能更好的为项目所用，重构是最好的选择。顺带的重构不至于会把项目搞乱，他人也可以从你重构的代码中受益，且不断的重构代码，也能提升你的代码质量。

然而如果碰到一段有很多依赖的代码，也许你就得慎重考虑下是否要对其进行重构。重构有很多依赖的代码，就像抽衣服上的线：抽得越多，散开得越多。对于这类代码，如果时间很紧，先把工作完成也许更合适。然后再匀出些时间，回头审视并重构代码。

高性能样式表

级联和权重

重构样式表，前提得先是你的改动符合优秀框架的特点。要对浏览器的表现形式级联有深刻的理解。

style

id选择器

class类选择器

类型选择器

!important

要扎实的理解上面样式的层叠样式覆盖关系，懂得计算层级特指度（权重）。

本文所说的 特指度（specificity）： 特指度表示一个css选择器表达式的重要程度，可以通过一个公式来计算出一个数值，数越大，越重要。

优质的CSS

1、保持选择器的简单；浏览器是从右向左匹配选择器的，所以避免层级过深。

2、分离CSS和JS；由于JS和CSS两者都依赖于HTML元素的类和ID。所以应避免两者的混乱，区别两者的职能。JS中使用的类和ID，不应该在用来为元素添加样式。

3、合理的利用盒子模型；盒子模型有两属性：content-box、border-box，区别于宽度高度的计算方式，合理的选择，适用于当下场景，能让你的开发节奏加快。

测试

测试CSS有难度，因为不同的平台、屏幕尺寸和设备都需要测试。全面测试的对CSS代码的改动进行测试会花费较长的时间，并且需要用到多种不同的工具。

推荐几款测试工具：

BrowserStack(http://www.browserstack.com)

Sauce Labs(http://saucelabs.com)

Browserling(http://www.browserling.com)

litmus(http://litmus.com)

Gemini视觉回归测试(http://github.com/gemini-testing/gemini)。该项目已停止更新了

代码组织和重构策略

顺序组织CSS代码

通用样式，消除不同浏览器之间的不一致性

基础样式，设定网站所有元素的基本样式，margin、padding、line-height等

组件和容器样式，以基础样式为基础进行，可复用的。样式的调整都交由父容器处理。

结构化样式，用来创建网站的布局，内再包含组件和容器样式

功能性样式，最精确的样式，针对特定的效果，比如js使用所添加的 !important 类

浏览器特定样式；可选，针对特定浏览器生效的样式，比如IE7: *diaplay: inline

多个文件还是大文件

用户访问包含CSS文件的网站时，浏览器首先要请求CSS文件，然后将其下载下来，在解析他们并用用恰当的样式。因此，我们需要尽可能的是其需要下载的CSS文件缩小。

在小型项目中用一个CSS文件完全可以接受，操作起来也简单。

在大型项目中拆分为多个文件，这样后期代码维护比较便捷

多个文件下的大型项目，可以使用工具在上线前，或者自动化工具把其页面需要的样式CSS文件，拼接合并为一个CSS文件

策略

1、删除僵尸代码。既然重构就尽可能的把一些存在但没有使用的代码剔除

2、分离CSS和JS。跟上面讲的一样，为元素添加样式的类和ID不应该在JS中用做选择器

3、删除冗余的ID。页面中的ID具有唯一性，且特指度最高，故重构时应降低更精确选择器的特指度。

4、定义可复用的组件。把网站中一些常用的样式接口组件化，精简重复的CSS

5、隔离面相特定的浏览器样式。浏览器之间存在差异，因此我们会在CSS中使用一些 “hack” 针对特定浏览器做调整。

经常策略性针对的衡量重构，以便能够更小更可控的模块发布你的代码改动。