未使用的 CSS - 你如何清理它？答案

【问题标题】：Unused css - how do you clean it up?未使用的 CSS - 你如何清理它？
【发布时间】：2012-05-31 09:08:29
【问题描述】：

可能任何有经验的 Web 开发人员都会熟悉这个问题：随着时间的推移，您的 css 文件会变得非常庞大和丑陋，因为所有不再使用的选择器可能很难找到。我正在做一个 Rails 项目，我们倾向于频繁地重新设计东西，这会导致大量的自重 css。找到并删除它的最佳方法是什么？

现在，我知道有一个名为 deadweight 的 Rails 插件专门为此目的而构建。但是，这是我的问题：首先，它完全忽略了 javascript 中使用的选择器。接下来，它仅扫描您配置为扫描的那些页面，这意味着存在删除因某种原因未扫描的页面上使用的内容的风险。最后，它只在编译后的 css 中找到未使用的选择器（我们使用 LESS）——将这些选择器与实际代码进行匹配有点太复杂了。

我也尝试过http://unused-css.com/ - 它们很棒，但无法访问本地主机，而且只能扫描编译后的 CSS。

我真的认为必须有更好的方法来做到这一点。实际上，前段时间我决定通过 grepping 整个项目目录中的每个选择器来优化一个特定的 css 文件（emacs + rinari 模式使其超级简单和超级快速），每次我没有看到任何 html 或 css在结果中我删除了样式。零问题，就像一个魅力。显然，我不会对整个网站都这样做。但是，我真的不相信这不能自动化。现在，在我启动我的 python 并编写代码之前，谁能告诉我我是否会重新发明轮子？

【问题讨论】：

你写过代码吗？我正在寻找类似的东西。
不确定我是否遗漏了什么，但它是否解析编译的 CSS 并不重要，未使用的选择器是未使用的选择器，无论是 LESS 还是纯 CSS。
已经有一段时间了……最终换了工作，搬到了不同的平台，由于种种原因，此后再也没有处理过这个问题。因此从未设法编写脚本:(对不起，伙计们

标签： javascript ruby-on-rails css optimization frontend

【解决方案1】：

查看 Opera Software 的 uCSS library。

它可以帮助您找到未使用的 CSS，以及重复的 CSS。此外，您还可以大致了解每个规则在您的标记中使用了多少次。通过设置配置文件可以使用多个选项。

更新：

另一个不错的选择：csscss。

用 Ruby 编写，支持 SASS、Less。

更新：

另一个不错的选择：uncss。

它适用于多个文件并支持 Javascript 注入的 CSS。

【讨论】：

+1 这是一个很棒的工具，也是我迄今为止看到的解决这个问题的最佳解决方案。
不完全是我想要的，但确实是我所见过的一切的最佳解决方案
csscss 是一个很棒的工具，但是 afak 只找到多余的 css，而不是未使用的 css

【解决方案2】：

Dust Me Selecters 和/或CSS Usage Firefox 扩展可以帮助您清除未使用的 CSS。

在 Chrome 的开发者工具中，您可以使用网页性能工具来查找未使用的 CSS 规则。

【讨论】：

这很好但并不完美：两者仍然只能使用编译后的 CSS，而我更喜欢可以通过 LESS 文件完成工作的工具
有趣。我不知道有什么可以追溯到预编译的......也许你正在做一些事情。可以使用现有工具检测未使用的 CSS，然后从那里计算相关的 LESS / SASS。如果你决定把它变成一个项目，请在 GitHub 上添加我。