来自 Johnny 的开发者博客
挑战：计算实际的未使用 CSS 百分比
我们的目标是创建一个脚本，用于测量此页面未使用 CSS 的百分比。请注意，用户可以与页面交互并使用不同的选项卡进行导航。
可以使用 DevTools 来衡量页面中未使用 CSS 的数量，方法是使用 Coverage 选项卡。请注意，页面加载后未使用 CSS 的百分比约为 55%，但在点击每个选项卡后，将应用更多 CSS 规则，并且百分比下降至仅约 15%。
这就是为什么我对任何试图测量“未使用 CSS”的东西持怀疑态度的原因。这是一个非常简单的演示（它所做的只是点击一些选项卡），未使用 CSS 的数量发生了巨大变化。
如果您正在寻找有关代码库中未使用 CSS 数量的准确数据，并且需要以自动化方式完成此操作，则需要访问您网站上的每个 URL 并触发每个元素上的所有可能的事件，并继续这样做，直到情况不再发生变化。然后，对用户可能处于的每个可能状态执行此操作——在每个可能的浏览器中。
这是我听说过的另一种非常奇特的方法
- 在页面加载后等待随机的时间
- 循环遍历 CSSOM 中的所有选择器
- 对它们执行
querySelector并查看它是否找到任何内容 - 将这些发现报告回中央数据库
- 对随机访客（或所有访客）运行此操作，运行足够的时间以确保它是代表您网站所有内容的可靠数据量
- 将您从未匹配任何内容的选择器集合添加一个微小的
1px透明 GIF 背景图像 - 运行修改后的 CSS，时间相同
- 检查您的服务器日志以确保从未请求过这些图像。如果已请求，则说明您对该选择器未使用的判断是错误的，因此请将其从列表中删除
- 最终，您将拥有一组 CSS 中很可能未使用的选择器。
很聪明，但极不可能有人以一致且有用的方式使用这两种方法。
我对 Lighthouse 等声称要 审核您的未使用 CSS 的工具有点担心，它们告诉您“从样式表中删除未使用规则以减少网络活动消耗的不必要字节”。这种可能性非常高，有人会运行它，找到这种所谓的未使用 CSS 并将其删除，结果却发现它实际上并没有被使用。