html - CSS 规则清理工具

Question

多年来，每当向我们的系统添加新元素以及引用这些文件的 JSP 页面（进一步包括其他 JSP 页面等）时，我们就有几个庞大的 CSS 文件不断增长。

我们知道我们有许多不再使用的规则和许多多余的规则。

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

Answer 1

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

Answer 2

这是一项棘手的任务……尤其是如果您的 HTML DOM 内容是以任何方式动态生成的。

Dust-Me-Selectors 插件很有帮助，但在逐页的基础上，很多选择器将未被使用......但不一定是无效的。

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

一个接一个地插入一些 HORRID 样式，您可以立即发现这些样式以确定是否正在使用选择器。例如

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

现在任何用巨大的虚线粉红色边框渲染的东西......都是“活动”选择器。如果您可以浏览大部分网站/应用程序而没有看到它，那么它可能已经“死”了。

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

如果您使用生成的 CSS 系统，另一种选择...是向您的选择器添加一个最终属性，该属性设置说...具有生成 URL 的背景图像。例如

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

然后，您只需浏览您的网站/应用程序一段时间，然后检查您的 Web 日志中的 HTTP 图像请求……查看日志中未请求的任何生成的图像 URL……您可能已经找到了一个“死”选择器。

Answer 3

Selenium允许您通过 css 选择器自动化页面测试和选择元素。如果您在整个站点上累积匹配项，您将能够识别不匹配的项目。