css - 有没有工具可以告诉我是否有未使用的 CSS 类？

Question

想象一下，我有一个<p>带有 class 的元素title：

<p class='title'>Title</p>

和

.title {
    font-size: 14px;
}

然后出于某种原因，我决定删除<p class='title'>Title</p>但忘记删除 CSS 规则。

是否有一种工具可以显示项目文件中未使用的所有 CSS 规则以清理我的代码？

我使用 Atom 作为我的文本编辑器。也许插件可以做到这一点？

标签： css

Answer 1

Chrome Devtools 有一个覆盖选项卡，可以找到未使用的 CSS 和 JS。

每行代码都有颜色编码：

• 纯绿色表示已执行的代码行。

• 红色常亮表示它没有执行。

• 一行红色和绿色的代码，例如图 2 中的第 3 行，意味着只有该行上的一些代码被执行。例如，像 var b = (a > 0) 这样的三元表达式？a : 0 是红色和绿色的。