未使用的CSS - 你如何清理它?

时间:2012-05-24 18:34:44

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

可能任何有经验的Web开发人员都会熟悉这个问题:随着时间的推移,你的css文件会变得非常庞大和丑陋,因为所有不再使用的选择器,这可能是相当棘手的。我正在开发一个我们倾向于经常重新设计东西的轨道项目,这导致了一吨无谓的CSS。查找和删除它的最佳方法是什么?

现在,我知道有一个专门为此目的而构建的称为deadweight的rails插件。但是,这是我的载重量问题:首先,它完全忽略了javascript中使用的选择器。接下来,它仅扫描您将其配置为扫描的页面,这意味着存在删除由于某种原因您未扫描的页面上使用的内容的风险。最后,它只在编译的css中找到未使用的选择器(我们使用LESS) - 将这些与实际代码相匹配有点过于复杂。

我也试过http://unused-css.com/ - 它们很棒,但无法访问localhost,而且只能扫描已编译的CSS。

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

2 个答案:

答案 0 :(得分:13)

从Opera Software中查看uCSS library

它可以帮助您找到未使用的CSS,以及重复的CSS。此外,您还可以概述每个规则在标记中的使用次数。通过设置配置文件可以使用多个选项。

<强>更新

另一个很好的选择:csscss

用Ruby编写并支持SASS,Less。

<强>更新

另一个很好的选择:uncss

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

答案 1 :(得分:2)

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

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