以编程方式检查CSS文件是否被使用

Question

有没有一种方法可以编写CSS审计脚本？我只需要文件级别的信息，而不是单个规则。似乎页面必须实际呈现才能获得准确的信息...所以也许像Selenium这样的工具可以帮助？

我已经看到有浏览器插件来审核CSS文件（例如这个StackOverflow问题，这个A List Apart文章），但是对于每个页面手动审查结果太耗时了。

背景

多年来，各种CSS文件已经渗入了我们的Web应用程序模板头部。当有多个框架、插件等重叠规则争夺优先权时，尝试为元素设置样式非常麻烦。

作为整合/标准化的一部分，我想将旧的引用移出网站模板并移到各个页面头部，这样CSS规则的影响将仅限于它们使用/需要的地方。

我认为最简单的方法是爬行网站并跟踪在哪里使用了哪些CSS样式表。

更新

意外的规则匹配是可能的，所以我开始认为我不能编写脚本来解决这个问题。我们可能需要逐页处理。即使如此，一些页面的样式可能依赖于对立样式表的奇怪交集 :-/

此外，我对这些静态CSS检查器持怀疑态度，特别是在模板文件中。规则ul > li.special可能在运行时之前不会匹配任何内容（元素可能是由服务器端或JavaScript创建的）。

- David J

---

关于PurifyCSS呢？看起来它可以与Web爬虫和/或Selenium驱动的脚本结合使用。 - raina77ow

根据您的开发堆栈，grunt-uncss 也可能是一个选择。 - hungerstar

问题在于PurifyCSS和uncss的作用与我想要的相反... 我只需要识别给定页面中未使用（或已使用）的样式表，以便它们不能直接使用。 - David J

我曾经遇到过这样的情况，即在模板样式之上使用自定义样式，包括一些旧页面的传统版本样式表。那时我所做的（而且也需要很多时间），是删除所有样式，然后从头开始重新实现样式表。这样做的好处是干净利落，我还有机会编写 SCSS 并对 CSS 项目应用一些结构。 - GolezTrol

我曾在继承旧代码时做过类似的事情（具体涉及媒体查询）。我写了一篇关于它的文章在这里。 - Brice

Answer 1

无法检查文件本身是否被使用。浏览器将加载所有文件。但是，您可以通过编程方式检查选择器是否被使用。因此，如果每个CSS文件都有一个唯一的规则，您可以利用它。

在每个文件中添加

UNIQUE_RULE::after {
    content: ' ';
    background: url(/track/?page=filename.css);
}

注意：我提到使用唯一规则，因为这种方法不允许您检查覆盖。

浏览器仅为存在于DOM树中的标签加载背景图像。要使用此文件，您需要使用其中一个规则。然后，您需要设置Selenium（或其替代品）以“点击”所有页面。

在测试运行完成后，只需通过访问日志进行grep，并查找缺失/track/文件请求。您还可以使用相同的方法检查每个单独的CSS规则（通过制作脚本将::after{..}添加到每个规则中），而无需更改Selenium设置。

这将需要一些时间投资，但是，当您设置好所有内容时，就可以重复使用它了。

这不是一个优雅的解决方案，但是可行的。

- tereško