Html CSS规则清理工具

我们有几个巨大的CSS文件，这些文件在过去的几年中不断增长，只要我们的系统中添加了新元素，以及引用这些文件的JSP页面（进一步包括其他JSP页面等等）

我们知道，我们有许多不再使用的规则，还有许多是多余的

---

新工具不断涌现。除了Aptana和W3C的CSS validator等显而易见的工具外，有没有一个工具可以分析目录并帮助清理和优化CSS规则？

Firefox有一个插件，尽管它可以查看浏览器中呈现的页面，当然不能查看目录。

这是一个棘手的任务。。。特别是如果您的HTML DOM内容是以任何方式动态生成的

Dust Me Selectors插件很有帮助，但是在逐页的基础上，很多选择器将被闲置。。。但并非NEC无效

我用了一些技巧来帮助清理

一个接一个地插入一些可怕的样式，您可以立即发现这些样式，以确定是否正在使用选择器。e、 g

border:6px dashed #ffaacc;
padding:12px;

现在，任何渲染为巨大的淡粉色虚线边框的内容。。。是一个“活动”选择器。如果你可以浏览你的大部分网站/应用程序而不去看它，那么它很可能“死了”

（如果您的CSS代码是“生成”的，您可以对其进行优化，一次使用各种颜色进行测试，并使用生成的内容预先添加选择器的“id”）

如果您使用生成的CSS系统，另一个选项。。。将最后一个属性添加到选择器中，设置为。。。具有生成的URL的背景图像。e、 g

#selector_a > .foo{
  ...
  background-image:url('selectortest/id_123.png');
}
#selector_b .bar{
  ...
  background-image:url('selectortest/id_124.png');
}

---

然后，你只需在你的网站/应用程序上冲浪一段时间，然后检查你的web日志中的HTTP图像请求。。。对于日志中未请求的任何生成的图像URL。。。您可能发现了一个“死”选择器。

允许您自动进行页面测试，并通过css选择器选择元素。如果您在整个站点中累积匹配项，您将能够识别不匹配项。

有人使用CSS冗余检查器吗？有类似的工具吗？我想作者是在寻找自动化工具，而不是手动解决方案。Dust-Me-Selectors确实保留了一个未使用的选择器的运行集合，但您需要点击每个页面。另外，如果你的站点有一个站点地图，你可以用它来爬网你的整个站点。@dalbaeb-同意，这只是一个比许多人想象的更难解决的“难题”。-）@mxmissile-嗯，不知道它保持了一个运行的聚合-我将不得不重新访问它。Dust-Me-selector似乎是最好的可用工具，主要是因为它将捕获应用于动态生成的DOM元素的样式。当通过应用程序单击并浏览所有可能的场景时，它可以很好地缩小未使用的样式。