如何显示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）进行我的项目。

我希望我的英语不是那么糟糕:)。

Answer 1

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

虽然它有局限性，但显然该网站必须在线。但主要想法在该网站的原理图中清楚地描述。你需要：

1. 收集HTML / JavaScript中所有使用过的类/ ID
2. 收集CSS中所有已定义的选择器
3. 交叉两个列表并查看剩下的内容

虽然这似乎是一项简单的任务，但有时候每个页面都有不同的CSS，或者动态渲染CSS等。

编辑：

要收集所有id和类，我将在文件上运行这些regexp：

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

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

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

Answer 2

  

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

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

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

  

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

还没有听说过任何工具。

Answer 3

你可以使用像 -

这样的jquery插件

http://csslint.net/about.html

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

http://csslint.net/index.html