通常，当谈到 CSS 的“未使用”时，指的是删除网站中未使用的大块 CSS，或者至少是当前在特定页面上未使用的样式。 最少的 CSS 量是最好的！ 我之前写过关于 这是一个难题。 在 JavaScript 世界中，等效项是 tree shaking（删除未使用的 JavaScript）。
但反过来呢，检测HTML 中未在 CSS 中使用的类呢？ 如果您确定这一点，则可以清理您的标记，删除没有任何作用的类。
我前几天看到 Robert Kieffer 发布了一个 Gist，其中包含一个有趣的解决方案。 这个想法是加载document.styleSheets并找到所有规则（即类规则）。 然后，使用MutationObserver监视 DOM 中的所有 HTML，并检查每个节点的classList以查看它是否与任何样式表中的类匹配。 如果 HTML 中存在样式表中找不到的类，则报告它。
我快速尝试了一下，它运行正常，并正确报告了未使用的类。
您的里程可能会有所不同。 首先，此脚本设置为 ES 模块。 这意味着，如果您只是import它并在普通的 HTML 文档上运行它，它将找不到任何内容，因为您的<script type="module">是延迟加载的，并且MutationObserver不会拾取任何内容。 我只是取消了模块化，并将其放在<head>中以使我的演示工作。
我将 Netlify Dropped 网站 发布到网上，以防您想深入研究并查看它。 我本可以使用 CodePen，但 CodePen 不会将您的样式链接为<link>样式表（默认情况下，但您可以使用外部资源来做到这一点）。 我只是认为将其作为已部署的网站会更清晰。
小心。
就像未使用的 CSS 因为很难确定规则集是否未使用而是一个难题一样，这种方法可能是一个更难的问题。 首先，类可能用作 JavaScript 挂钩。 样式可能会在<style>块中注入到页面中，而此脚本不会检查这些样式。 哎呀，您可能在 CI 中运行的集成测试会使用类执行与测试相关的事情。
我想说，这种东西对于查看您怀疑可能未使用的类很有用。 但我不会说有许可证可以运行此程序，然后在没有进一步调查的情况下删除所有报告的类。
我之前只关注如何删除未使用的 css 和 javascript，但现在这篇文章开阔了我的思路，我也开始关注未使用的 html，谢谢。
我用过这个来检测人们覆盖组件的情况。 我这里有一个例子： https://ddamato.github.io/css-identify-overrides/examples/
不错！
console.log("谢谢！")我希望我可以在 wordpress 上轻松使用它。 但是 WordPress 本身会生成很多类。 更不用说这个插件和那个插件了。 :-D
我想最终，我将不得不忍受我的一点开销。 如果您有一些额外的类可以使用，那么使用 Gutenberg 定位内容总是更容易的 ftw。