有没有工具可以识别未定义的CSS/HTML类？

Question

有没有工具可以查看我的网站HTML，并告诉我（例如）："在mysite.com/example.html中存在一个HTML元素，使用的类是SOMECLASS，但SOMECLASS没有在任何包含的CSS文件中定义"？

- Dougal

---

请记住，类可能用于除样式以外的其他目的 - 例如，使用Javascript为元素添加行为。您寻找的工具可能仍然存在。 - Jørn Schou-Rode

是的，我确实意识到了这一点。我认为class属性大多数情况下仅用于CSS。 - Dougal

Answer 1

我创建了一个代码片段，可以实现这个功能：https://gist.github.com/kdzwinel/426a0f76f113643fa285 你可以在开发者工具控制台运行它，示例输出看起来像这样：

- Konrad Dzwinel

Answer 2

你可以尝试使用Firefox插件，比如Dust-me-selectors。

- marcgg

---

看起来正是我想要的！谢谢。 - Dougal

@Dougal 值得注意的是，DustME 只会检查页面的当前状态，因此基于 @media 的规则或仅适用于 AJAX 内容等规则将被标记为未使用。以防你过于热衷于从 CSS 中删除冗余规则！ - Martin

对我来说，这似乎是在您的CSS文件中查找已定义的选择器并指出未使用的选择器。但是，这个问题是关于在您的HTML文件中使用的CSS，而这些CSS在任何一个CSS文件中都没有被定义。 - Zitrax

嗯，我可能做错了什么，但据我所知，DustMe只列出在样式表中不匹配当前HTML的选择器，而不是HTML中未被任何样式表中的选择器匹配的类... - Oliver Giesen

我无法让它工作。看起来 DustME 不再起作用了。 - zhekaus

哎呀，这个工具似乎已经不存在了。 - Robert Rapplean

Answer 3

你可以尝试使用Firebug进行检查。

- Galwegian

---

好的...那么在Firebug中，你具体要做什么来识别未定义的CSS类？特别是如果页面上有数百个这样的类？ - sdaau

我无法看出Firebug如何处理未定义的CSS类。 - zhekaus

Answer 4

有一个免费的 Windows 桌面工具，可以扫描本地 Web 项目文件夹并输出未定义的 CSS 类，即在 HTML 中使用但在任何 CSS 中都没有定义的类。它还在一定程度上考虑了 JavaScript。

https://sourceforge.net/projects/cssscanner/

所有其他答案要么对我无效，要么没有理解我的问题（包括被接受的答案）。这个我刚试过，表现出奇妙的效果，但它不会捕捉到每一个边缘情况。

- djk