什么工具可以分析我的网站并报告未使用/不需要的CSS？

Question

我如何早期发现网站中是否使用了这个CSS类？

比如-

我在CSS中编写的样式属性是否被使用？

还有

页面中是否使用了class或id？

例如：

.textstyle4{
    font:normal 12px Arial, Helvetica, sans-serif ;
    color:#777;
}

我想知道在我的整个网站中，这个CSS样式被用在了哪里？ 这是一个例子。

- Kali Charan Rajput

---

你能否提供一个示例，说明你希望它如何工作？不确定你是在寻找基于代码的解决方案还是只是一个用来查看源内容并找出答案的工具。 - spinon

你让我一头雾水。如果你想知道一个元素应用了哪些类/样式，那么Roberto的答案“FireBug”是正确的。如果你想知道CSS在任何给定页面上使用/未使用的部分，则Kekekela的答案CSS Usage是正确的。如果你想找到使用样式表特定部分的所有页面，那么据我所知你就很难了。 - STW

@KC 这意味着你找不到你要找的东西。我理解你的问题是想做类似右键单击 CSS 类并选择“查找用法”的操作，这将是一个很棒的功能，但我不知道是否有这样的工具。 - STW

Answer 1

火狐浏览器的CSS Usage插件可以满足您的需求： https://addons.mozilla.org/zh-CN/firefox/addon/10704/

- heisenberg

---

嗨，我可以找到应用于元素的元素，但真正想知道应用CSS的是哪个元素？在这种情况下很合适。 - Kali Charan Rajput

我不确定我是否理解你的意思，但听起来你可能只是想要像Roberto建议的Firebug...它允许你选择一个元素并查看应用于它的所有样式，以及任何被覆盖的样式。 - heisenberg

我经常使用Firebug来应用CSS样式到元素上。但现在我需要知道我的类在网站中被使用在哪里？ - Kali Charan Rajput

哦，我不知道有什么方法可以做到这一点。因为它需要加载所有页面，并且对于任何不完全静态的内容，它都必须以某种方式确定您可以呈现的所有不同的HTML。我认为你最终会不得不自己开发类似的东西。 - heisenberg

Answer 2

如果您想查看在浏览器中呈现的元素应用了哪些CSS样式，您可以考虑使用Firefox和Firebug来查看DOM和CSS信息。

http://getfirebug.com/

如果您正在使用IE8，您可以使用IE8开发人员工具来完成相同的操作。

- Roberto Hernandez

Answer 3

还有一个名为“Dust-Me”的Firefox扩展程序，可以查找未使用的CSS：

https://addons.mozilla.org/en-US/firefox/addon/5392/

然而，这个插件不支持FF5+。

- desau

Answer 4

所以你想做到的是，像点击一个CSS类一样，让它找到你网站上使用该类的所有页面？目前没有这样的工具可用，kekekela的答案CSS Usage可能是最接近你能得到的--它会让你发现哪些CSS被单个页面使用。

- STW

Answer 5

Dust-Me https://addons.mozilla.org/zh-CN/firefox/addon/5392/

- Ashit Vora

Answer 6

虽然这是一个相当古老的问题，但 TopStyle 5 可以生成有关整个站点的类使用情况、孤立的类、未定义的类、ID 概述和大小写不匹配的报告，所有这些都与样式表中的相应文件或位置相关联。然而，据我所知，只分析样式表，而不分析 style 块或内联样式，但这可能取决于站点的布局。在这里，style 块是动态插入的，所以这可能是 TopStyle 没有找到它们的原因。当然，它不是免费的。

- JayAitch