使用 CSS Dig 开始重构

以下是 Tom Genoni 的客座文章。Tom 构建了一个开源的 Chrome 扩展程序来分析 CSS。我会让他来介绍它。

这是一个新的网页项目。您将从头开始。前端将干净有序。您已设置默认值。您的 CSS 文件已组织。您有了一个系统！这次将有所不同。会有什么问题呢？

如果您对此感到熟悉，那么您就知道它通常会如何结束：慢慢地，不可避免地，代码开始膨胀，您会感觉到控制力正在失去。它变得复杂且交织在一起。您正在覆盖样式，命名不一致，魔法数字和黑客到处都是。旧代码难以解析，文档记录不良，而且让新同事理解它很困难。错误开始出现。该死。最好在上面添加更多 CSS。

为了避免这种命运，我研究了重构技术、新兴的最佳实践，并最终构建了 CSS Dig。在这篇文章中，我将重点介绍三个 CSS Dig 可以提供帮助的领域，并提供一些重构技巧。

开始审计

在 Nicolle Sullivan 关于她 对 Trulia 的重构 的演示文稿中，她建议对您网站的每个角落和缝隙进行截图，并将设计元素分组在一起，以查看字体大小、按钮、背景、边框等的整个宇宙。仅此一项练习就经常会发现很多不一致之处（以及相当多的抱怨），并为标准化提供了一个起点。

在意识到，是的，我们有太多按钮变体之后，下一步是“grep 您的样式”：以相同的方式仔细检查您的 CSS，您经常会发现各种各样的属性和值，它们是合并的候选者。这就是 CSS Dig 可以提供帮助的地方。

安装 Chrome 扩展程序 后，您将在浏览器的右上角看到它的图标。导航到您要检查的网站，然后单击图标。一些注意事项

• 在具有大量 CSS 的网站上，根据您的连接速度，CSS Dig 可能需要几秒钟才能完成。
• 具有严格“内容安全策略”的网站可能会导致 CSS Dig 失败。例如，facebook.com 和 github.com。
• 通过 @import 引用的 CSS 会被忽略。它被认为是一种不好的做法，大多数网站现在都避免使用它。

提高速度

您将看到的第一件事是一个对话框，其中列出了在该页面上找到的所有 CSS 文件和样式块。请注意，某些远程文件（如字体提供程序）不可访问，并将被列为“无法挖掘”。您可以禁用不需要包含在分析中的项目（如第三方库），但在“开始挖掘”之前，请仔细查看该列表。减少 http 请求是首要的性能规则，因此将 CSS 合并到更少的文件中是一个良好的开端。

选择要检查的 CSS 后，单击“开始挖掘”，您将看到 CSS Dig 主屏幕。在左侧，您将看到属性及其计数。单击这些属性会显示 CSS 中使用的实际声明。单击单个声明会隔离右侧列中的规则集。

太多颜色

我最喜欢检查的第一件事就是颜色。这里的高数字通常是其他领域问题的先兆。不久前，我在 huffingtonpost.com 上运行了 CSS Dig。他们已经清理了一些东西，但当时他们正在使用的是

不同的网站有不同的需求和约束 - 但与 apple.com 的颜色相比

因为 CSS Dig 会向您显示颜色的使用次数，所以您可以快速识别哪些颜色需要合并。选择一种主要的蓝色（或红色或绿色）并将其设为默认值。如果您使用的是预处理器，请创建变量并坚持使用它们。您的用户将获得更一致的体验，您也更容易维护。Sass 映射非常适合这种情况。

$ui-color: (
  brand         : #0081BA,
  brand-light   : #9ACCE2,
  brand-dark    : #036,
  bad-news      : #C60C0C,
  good-news     : #97C70A
);

然后使用以下方法引用颜色

.foo {
  color: map-get($ui-color, brand);
}

间距

其他需要标准化的领域是填充和边距。拥有各种各样的值并不罕见，有时在不同的单位中，尤其是在不同的团队在网站的不同部分工作时。但是，当组件必须混合搭配时，不一致会很快变得明显。

解决此问题的一种方法是设置一个应用于所有元素的全局间距网格（有一些例外情况）。在 Optimizely 的 UI 库中，我们使用间距单位（当前为 10px），所有组件间距都基于此。这有助于排除 “魔法数字”，但仍能给予 CSS 作者一定的自由度。

例如，以下代码

.foo {
  padding: spacer(1);
  margin: spacer(1.5) 0;
}

编译成

.foo {
  padding: 10px;
  margin: 15px 0;
}

使用

@function spacer($value) {
  @if ($value * 2) % 1 != 0 {
    @warn 'Spacer value must be a multiple of 0.5';
    @return 'Spacer value must be a multiple of 0.5';
  } @else {
    @return $spacer-unit * $value;
  }
}

如果我们的间隔函数看到的值不是 0.5 的增量，它将返回错误。没有什么能阻止作者使用硬编码的数字，但可以在代码审查中讨论异常情况。我发现这经常在组件之间创造出意外的和谐。

特异性战争

当 Sass 开始流行时，开发者尝试 匹配他们正在设置样式的 HTML 的嵌套结构 并不罕见。这似乎是一个好主意。我尝试过。但事实证明，这会造成各种各样的复杂情况，现在 不建议这样做。

它加剧的痛苦之一是与 CSS 特异性长期存在的斗争。为了重用高度具体的组件而覆盖长选择器是一种令人困惑且令人讨厌的体验，通常会导致更多选择器和（哎呀）!important 规则，以及您希望永远不必向任何人解释的代码。

在 CSS Dig 报告的选择器选项卡中，您将看到列出的所有选择器，可以选择按长度和特异性进行排序。这些是使用 Keegan Street 的 特异性计算器 计算得出的。这将有助于识别潜在的选择器定时炸弹，并希望开始使样式嵌套程度更低、更可重用、更易于维护。我还建议使用 CSS 特异性图形生成器 来获得代码的鸟瞰图。

继续

如果您在查看自己的代码后发现想要进行更深入的重构，这里有一些需要考虑的步骤。

1. 为重构选择一个简短的代码名称。这有助于使项目具有重要意义，更重要的是，它提供了一种命名空间新类的方法。在 Optimizely，我们使用 lego- 作为所有类的前缀（是的，我知道，超级原始的名字），但它在提供新类和旧类之间的明确分离方面非常有价值。
2. 采用模块化、面向对象的 approach，例如 BassCSS、SMACSS 或 Harry Roberts 的即将发布的 Inuitcss 刷新版。这极大地减少了我们编写的代码量，并显著提高了开发速度。
3. 使用 linter（如 CSS lint 或 SCSS-lint）。这将自动执行各种常见的代码标准化，使您的代码保持清洁和一致。

贡献

CSS Dig 源代码已 在 GitHub 上发布。欢迎您提出建议、请求和错误报告。

另外，我在 Optimizely 工作 - 请查看我们。我们正在进行一些有趣的事情。