CSS规则清理工具

Question

我们有几个大量的CSS文件，这些文件在我们的系统中添加新元素以及引用这些文件的JSP页面（还包括其他JSP页面等）时，这些年来不断增长。

我们知道我们有许多不再使用的规则，而且许多规则都是多余的。

新工具不断涌现。是否有一个工具（除了Aptana和W3C的CSS验证器之类的明显的工具）可以分析目录并帮助清理和优化CSS规则？

Answer 1

Firefox有Dust-Me-Selectors插件，虽然它可以浏览浏览器中呈现的页面，当然也不是通过目录。

Answer 2

这是一项棘手的任务......特别是如果你的HTML DOM内容是以任何方式即时生成的。

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

我曾经用过一些技巧来帮助清理。

逐个插入一些HORRID样式，您可以立即找到它以确定是否正在使用选择器。 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');
}

然后，您只需浏览您的网站/应用一段时间，然后检查您的网络日志中的HTTP图像请求...对于日志中未请求的任何生成的图片网址...您可能已经发现“死了” “选择器。

Answer 3

Selenium允许您自动执行页面测试并通过css选择器选择元素。如果您在网站上累积匹配项，则可以识别不匹配的项目。