css - 如何快速判断页面上正在使用 CSS 文件的哪些部分？

Question

我有一个应用于多个页面的大量 CSS 文件。我希望将它分解为一个通用 CSS 文件和几个页面级 CSS 文件，因为它变得难以使用。不幸的是，要说出究竟什么是常见的并不容易。我希望有一种方法可以快速查看给定页面上使用了哪些行/选择器。有谁知道可以做到这一点的工具？我不想使用开发人员工具并一一浏览 DOM 元素。我想查看 CSS 文件并查看未使用的选择器变灰之类的。谢谢！

Answer 1

您至少可以在 Chrome中使用开发人员工具中的“审核”选项卡。运行它后，它会告诉您当前页面中未使用哪些样式。

在这个网站上测试它：

Answer 2

对于 Firefox，有一个名为CSS Usage的附加组件——可能也值得一看。