以编程方式检查是否使用了 CSS 文件答案

【问题标题】：Programmatically check whether a CSS file is used以编程方式检查是否使用了 CSS 文件
【发布时间】：2016-12-21 21:21:27
【问题描述】：

有没有办法编写 CSS 审计脚本？我只需要文件级信息，而不是单独的规则。似乎页面必须实际呈现才能获得准确的信息……所以像 Selenium 这样的东西可能会有所帮助？

我看到有浏览器插件可以审核 CSS 文件（例如，StackOverflow question、A List Apart article），但是手动查看每个页面的结果会花费太长时间

背景

多年来，各种 CSS 文件已潜入我们网络应用的模板标题中。当来自多个框架、插件等的重叠规则都在争夺霸权时，尝试为元素设置样式是一个巨大的痛苦。

作为整合/标准化尝试的一部分，我想将旧参考从网站模板移到各个页面标题中，因此 CSS 规则的影响将仅限于使用/需要它们的地方.

我认为最简单的方法是抓取网站并跟踪在何处使用了哪些 CSS 样式表。

更新

可能会出现无意的规则匹配，所以我开始认为我无法编写此脚本。我们可能不得不逐页浏览。即便如此，某些页面的样式可能依赖于对立样式表的奇怪交集：-/

另外，我对这些静态 CSS 检查器持怀疑态度，尤其是对于模板文件。规则 ul > li.special 可能直到运行时才匹配任何内容（可以在服务器端或 javascript 创建元素）

【问题讨论】：

PurifyCSS 怎么样？看起来它可以与 web-scraper 和/或 Selenium 驱动的脚本结合使用。
grunt-uncss 也可能是一个选项，具体取决于您的开发堆栈。
问题是 PurifyCSS 和 uncss 做的与想要的相反……我只需要识别给定页面未使用（或使用）的样式表，因此它们不会开箱即用跨度>
我曾经遇到过这样的情况，我在模板样式上进行了自定义样式，包括旧页面的一些旧版样式表。我当时所做的（这也需要很多时间）是删除所有样式，然后重新开始，自上而下，重新实现样式表。这样做的好处是它很干净，我借此机会用 SCSS 编写所有内容并将一些结构应用到 CSS 项目中。
在继承旧代码时，我做了类似的事情（特别是围绕媒体查询）。我写了一篇关于它的文章here。

【解决方案1】：

没有办法检查文件本身是否被使用。浏览器将全部加载。但是您可以做的是以编程方式检查是否使用了选择器。因此，如果您的每个 CSS 文件都有一个独特的规则，您就可以利用它。

在每个文件中添加

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

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

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

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

这将需要一些时间投入，但是，当您完成所有设置后，就可以重复使用它。

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

【讨论】：