CSS 优化：声明只用一次（UDJO）在今天仍然有效吗？

CSS 优化：如今只用一次声明（UDJO）仍然有效吗？

CSS 优化是一个具有欺骗性的话题。一方面，它感觉像是件简单的事，我们本该已经拥有所有工具——尤其是在压缩方面。另一方面，认为我们已经把 CSS 优化周围的“一切”都利用殆尽，这种想法可能被认为是天真的。对于一个几乎每天都在演变的语言来说，这种说法很难站得住脚。

在本文中，我想挑选一项至少已有 18 年历史的技术——UDJO，即“声明只用一次”。

知道更早的出处？请评论！

该技术受到 DRY 原则（“不要重复自己”）的启发，其工作方式是识别并减少（如果不是消除）声明重复。

因此，如果像 display: flex 这样的内容出现两次或更多次，它会被合并到一条规则中：

        .example {
  display: flex;
}

.sample {
  display: flex;
}
      

        .example,
.sample {
  display: flex;
}
      

该技术的结果取决于去重做得有多智能，以及选择器有多长。智能程度决定 UDJO 是否能带来真正的可维护性优势——声明的更改是否真的能作用于所有关联的选择器？而选择器长度会影响文件大小节省的幅度。

如果你感兴趣，我那篇关于“DRY CSS”的文章更详细地描述了其机制。这里的问题是：UDJO 在今天是否仍然有效、仍然相关？

借助工具更好地去重

然而，当我们试图回答这个问题时，会遇到一个问题：当网站很复杂，且其样式表声明此前从未去重时，UDJO 可能需要大量工作。

为了节省一些时间，我为这项工作构建了工具。虽然它看起来不会立刻像手动遍历并测试样式表那样全面，但一个工具能捕捉到一些重复，这看起来已经足够现实。

直接说结果，我创建了 CSS Dedup，不仅用于识别重复，也用于对可以安全优化的内容进行去重（CSS Dedup 对此有一些文档说明，但本质上，去重会影响选择器的位置，而这是层叠工作方式的一部分）。这样一来，我们就得到了一些数据：

现代 CSS 中有什么可去重的内容吗？

第一批中，我任意挑选了 20 个网站进行分析。然后我用 CSS Dedup 检查：如果对看起来可证明安全的内容去重，以及对看起来可能安全、但仅在能带来文件大小节省时才去重的内容去重，文件大小会有什么变化。

我选择这两个选项，是为了提供去重的“自然”结果，同时也提供网站所有者可能最感兴趣的结果：减少重复，同时减小传输大小。毕竟，UDJO 作为一种 CSS 优化技术，可以同时改善可维护性和性能。

以下是发现：

重要说明：这些数值不能用来判断 CSS 质量——它们取决于选择器长度，也取决于在各自情况下验证去重是否真的带来更好的可维护性。还要注意，这里没有包含压缩后的变化——这不在实验范围内，但也值得测试。

从中可以看出什么？

• 在这 20 个案例中，我们都能够减少声明重复。

• 在 18 个案例中，减少声明重复会导致文件大小增加（由于选择器重复，且选择器比节省下来的声明更长）。

• 不过，在所有案例中，都可以通过只对能带来这种节省的样式表去重的方式，来减少声明重复，同时减少文件大小。

对于 UDJO 在今天是否仍然有效这个问题，答案应该是肯定的。它不仅有效，甚至还带来了文件大小节省。

也许你也好奇，在我们这个领域、在 Web 开发者中，情况是什么样。我们也来取一些样本看看。

这些数据说明了什么？

• 与组织类网站一样，每个站点都有一些可以安全移除的声明重复。

• 在 5 个案例中（50%，相比之前的 90%），减少重复会导致文件大小增加。

• 不过，同样在所有案例中，也可以通过能够带来文件大小节省的方式来减少重复。

扩大这项分析、取更多样本并研究样本之间的差异会很有价值，但 Web 专业人员使用更短的选择器，以便从 UDJO 中获得更多好处，这可能是有道理的。

关于 UDJO 作为 CSS 优化技术的有效性

如开头所述，UDJO 的有效性通常取决于重复的类型以及选择器的长度。

不过，这是可以管理的：虽然像 CSS Dedup 这样的工具不区分声明的使用场景（因此比较粗放），但可以配置它们，从而获得性能收益。

正如本文所采集的数据所示，在大多数情况下都可能实现文件大小的节省。考虑到这基于安全的更改，这意味着一种低成本的性能优化途径——尤其是在应用于最小化输出时。仍然最好将其与进一步压缩（例如 gzip/Brotli）的使用放在一起权衡，但从表面上看，去重展示了它如何减小 CSS 的大小。

对于普遍关注 CSS 优化、可维护性和性能的人来说，UDJO 或许应当成为 CSS 整体方法的一部分。但由于这项技术一直较为小众，且工具尚新，我邀请你审阅、测试并探索这一途径。很难说我们已经在 CSS 优化所能达到的程度方面触及了天花板。