html - 如何显示所有在 CSS 文件中没有定义的类？

Question

是否有工具可以显示/突出显示定义了某些类的所有元素，但在 css 文件中定义的此类没有 css 规则？

例如，我有 html 代码，如：

...
<div class="class_one">Some text for class one</div>
<div class="class_two">Some text for class two obviously</div>
...

在 .css 文件中，我们有：

...
.class_one {
    color: red;
}
.class_three {
    color: magenta;
}
...

在这种情况下，如果需要知道 css 中没有定义的所有类，我应该得到“class_two 没有类定义”。另外我应该指出这个工具（或其他工具）不应该在线，因为我使用本地 LAMP 包（在我的例子中是 MAMP Pro）做我的项目。

我希望我的英语不是那么差:)

score 2 · Accepted Answer

我遇到的唯一 OOTB 解决方案是这个：http ://unused-css.com/

虽然它有局限性，但显然该网站必须在线。但是主要思想在该站点的示意图中清楚地描述了。你需要：

尽管这似乎是一项简单的任务，但有时每个页面都有不同的 CSS，或者 CSS 是动态呈现的，等等。

编辑：

要收集所有 id 和类，我会在文件上运行这些正则表达式：

<(.*)class="(.*)"(.*)>
<(.*)id="(.*)"(.*)>

（在http://regexpal.com/上测试过）

使用记事本++（或任何其他在搜索模式时可以派上用场的东西），我会收集我的 HTML 中存在的全部项目集（也可能为 javascript 修改它）。然后我会将匹配的 CSS 类收集到一个正则表达式中，并将其与我的 CSS 进行匹配以查看缺少的内容。

score 0 · Accepted Answer

您可以使用 jquery 插件，例如-

或者您也可以输入您的 css 并发现错误和警告。-

score 0 · Accepted Answer

如何显示所有在 CSS 文件中没有定义的类？

这很简单：解析所有 html 元素，并用class属性的所有条目填充一个列表。在此之后，解析 CSS 并填充第二个列表。从第一个列表中删除 CSS 列表的所有条目，您的类没有 CSS 声明。

请注意，如果您在 JavaScript 中使用动态创建的类名，这会变得更加复杂。

是否有工具可以显示/突出显示定义了某些类的所有元素，但在 css 文件中定义的此类没有 css 规则？

还没听说有什么工具。

3 回答 3