如何快速确定页面上使用了 CSS 文件的哪些部分？

Question

如何快速确定页面上使用了 CSS 文件的哪些部分？

3

我有一个应用于多个页面的大型CSS文件。希望将其拆分为一个通用的CSS文件和几个页面级别的CSS文件，因为它变得难以处理。不幸的是，很难确定哪些内容是通用的。我希望能够快速查看给定页面上使用了哪些行/选择器。是否有工具可以做到这一点？我不想使用开发者工具逐个浏览DOM元素。我想查看CSS文件并查看未使用的选择器是否被标记或其他方式。谢谢！

- Nick G.

2

好问题，但您能否允许使用任何编程语言？仅使用CSS和HTML会很困难。 - Hanky Panky

不幸的是，这个文件是一个老式的CSS文件。但我正在将它转换成SCSS文件。这样有帮助吗？此外，HTML是使用Freemarker模板创建的。 - Nick G.

1

您正在考虑重构CSS文件，这可能需要大量手动劳动。如果有这样的工具将是一个额外的好处... - Marc Audet

2个回答

2

对于Firefox，有一个名为CSS Usage的插件 - 也许值得一看。

- CBroe

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- pzin · Accepted Answer

您可以使用Chrome浏览器的审核选项卡来检查未在当前页面中使用的样式。测试此功能可参考以下截图： enter image description here

。