Question

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

我已经看到有浏览器插件来审核CSS文件（例如此StackOverflow question，此A List Apart article），但手动审核每个页面的结果需要太长时间

背景

多年来，各种CSS文件已经渗透到我们的网络应用程序的模板标题中。当来自多个框架，插件等的重叠规则都争夺至高无上时，试图对元素进行样式化是一个巨大的痛苦。

作为整合/标准化尝试的一部分，我希望将旧的引用移出网站模板并转移到各个页面标题中，因此CSS规则＆＃39;影响将仅限于使用/需要的地方。

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

更新

无意识的规则匹配是可能的，所以我开始认为我不能编写此脚本。我们可能不得不逐页进行。即便如此，某些页面的样式可能依赖于相反的样式表的奇怪交集： - /

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

Answer 1

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

在每个文件中添加

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

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

浏览器仅为DOM树中存在的标记加载背景图像。要使用此文件，您需要使用其规则。然后你需要设置Selenium（或其替代方案）来点击＆＃34;点击＆＃34;通过你的所有页面。

测试运行完毕后，您只需查看访问日志并查找缺少 /track/文件请求。您也可以使用相同的方法检查每个CSS规则（通过制作脚本以向每个规则添加::after{ .. }），而不会更改Selenium设置。

这需要一些时间投入，但是，当你把它全部设置好后，就有可能重复使用它。

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