css - 查找缺少的 CSS 类和 ID 的最简单方法

Question

如何识别在代码中引用但在 css 文件中缺失的 css 类或 id？firebug 中是否有我可以使用的功能？

谢谢。

Answer 1

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

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

用于查找未使用的 CSS 规则的一个很好/常见的 Firefox 插件是Dust-Me Selectors。如果您真的想要一个工具来查找没有 CSS 规则的 ID 和类，您可能会将该附加组件的源代码作为创建自己的 Firefox 扩展的良好起点。

---

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

以下是 ID 或类可能出现在页面中的一些原因：

1. 将内容识别为 javascript，或标记更改内容的目标。除了最简单的动态页面之外，这对于所有页面都是必须的。
2. 同样，插件、扩展、蜘蛛、RSS 工具等使用 Id 和类。
3. 作为状态或状态指示器。例如：<p class="comment highest-rated">...
4. 作为页内锚点的简单替代品。这些允许在不添加元素的情况下精确定位超链接。   示例链接。
5. 作为良好语义标记的一部分，这是帮助人类和我们的脚本理解、使用和维护页面的最佳实践。
6. 帮助定位 CSS。

Answer 2

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

Answer 3

带有 ReSharper 插件的 Visual Studio 可以做到这一点。它用蓝色波浪下划线显示每个缺失的类。

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

• Visual Studio 2013 高级版
• ReSharper 版本 8.2.3

其他版本也可以。