找到丢失的CSS类和ID的最简单方法

Question

如何识别代码中引用但css文件中缺少的css类或id？我可以使用firebug中的任何功能吗？

感谢。

Answer 1

Firebug没有这样做，也没有我能想到的任何工具，因为它不是常见或高回报的任务。

但是， 是查找未使用的CSS规则的常见任务，因此可以对其进行裁剪。您可以通过修剪常见的CSS文件来获得性能提升。但是从HTML页面中删除ID和类并没有多大帮助，并且更有可能破坏某些东西（见下文）。

用于查找未使用的CSS规则的好/常用Firefox附加组件是Dust-Me Selectors。如果您真的想要一个工具来查找没有CSS规则的ID和类，那么您可以将that add-on's source code作为制作自己的Firefox扩展的良好起点。

---

删除ID和类只是因为它们没有CSS规则并不是一个好主意，可能会破坏事物。
由于各种原因，ID和类可以在页面中，而不仅仅是CSS的方便句柄。

以下是ID或类可能位于页面中的一些原因：

1. 识别javascript内容，或标记目标以更改内容。除了最简单的动态页面之外，这是必须的。
2. 同样，Id和类也被插件，扩展，蜘蛛，RSS工具等使用。
3. 作为州或州的指标。 EG：<p class="comment highest-rated">...
4. 作为页内锚点的简单替代品。这些允许精确定位的超链接而不添加元素。 Example link.
5. 作为良好Semantic Markup的一部分，这是帮助人类和我们的脚本理解，使用和维护页面的最佳实践。
6. 帮助定位CSS。

Answer 2

Visual Studio，使用ReSharper插件执行此操作。它显示每个缺少的类，带有蓝色波浪下划线。

我不确定是哪个版本，但我使用

• Visual Studio 2013 Premium
• ReSharper Version 8.2.3

其他版本也可以。

Answer 3

您可能会发现在此 link 中回答的问题很有用，Javascript 可用于搜索类。虽然找到 CSS 未使用的类可能很有用，但请注意删除由于其他原因可能需要的类（正如其他人指出的那样）。