通常，当 "未使用 "出现在有关CSS的谈话中时，它是指删除那些在你的网站中没有使用的CSS块，或者，至少是目前在特定页面上没有使用的样式。最小量的CSS是最好的。我在过去曾写过这是一个很难解决的问题。在JavaScript领域，相当于摇树（删除不使用的JavaScript）。
但是，反过来说，检测HTML中没有在CSS中使用的类，又是怎么回事呢？如果你确定知道这一点，你就可以清理你的标记，删除那些没有用的类。
我看到Robert Kieffer前几天在Gist上发布了一个有趣的解决方案。这个想法是加载document.styleSheets ，找到_所有的_规则（就是那些类）。然后，使用MutationObserver ，观察所有HTML的DOM，并检查每个节点的classList ，看它是否与任何样式表的任何内容匹配。如果HTML有一个在样式表中找不到的类，就报告它。
我给了它一个快速的旋转，让它工作并正确报告未使用的类。
你的里程可能会有所不同。首先，这个脚本被设置为一个ES模块。这意味着如果你只是在一个普通的HTML文档上运行import ，它不会发现任何东西，因为你的<script type="module"> ，而且MutationObserver ，不会发现任何东西。我只是取消了它的编排，把它放在<head> ，使我的演示工作。
我在网上 发布了 网站，如果你想深入了解它并检查它。我本来想用CodePen，但CodePen不会把你的样式链接成<link>ed stylesheets（默认情况下，但你可以使用外部资源来做）。我只是认为作为一个部署的网站会更清楚。
现在要小心了。
就像未使用的CSS是一个困难的问题，因为很难确定知道一个规则集是否未使用，这种方法可能是一个_更困难的_问题。首先，类可能被用作JavaScript的钩子。样式可能被注入到页面的<style> 块中，这个脚本不会检查。另外，你可能有在CI中运行的集成测试，使用类来做与测试有关的事情。
我想说的是，这种东西是一个有用的工具，可以让你看看那些你有预感可能未使用的类。但我不会说有一个许可单来运行这个东西，然后在没有进一步调查的情况下把每一个报告的类拉出来。
The postDetect Unused Classes in... HTMLappeared first on CSS-Tricks.
你可以通过成为MVP支持者来支持CSS-Tricks。
