未使用的css - 你怎么清理？ [英] Unused css - how do you clean it up?

问题描述

可能任何经验丰富的Web开发人员都会熟悉这个问题：随着时间的推移，您的CSS文件可能会变得相当巨大和丑陋，因为所有不再使用的选择器，这可能很难找到。我正在做一个rails项目，我们倾向于重新设计的事情，经常，这导致一吨重的css。找到和删除它的最好方法是什么？

现在，我知道有一个专门为此目的而构建的称为负载的rails插件。但是，这里是我的问题与负载：首先，它完全忽略在JavaScript中使用的选择器。接下来，它只扫描您配置为扫描的页面，这意味着有可能删除在某些原因未扫描的页面上使用的某些内容。最后，它发现未使用的选择器只在编译的css（我们使用LESS） - 匹配这些对实际的代码是有点太牵涉。

我也试过< =http://unused-css.com/> http://unused-css.com/ - 他们是伟大的，但不能访问localhost，再次，只能扫描编译的CSS。

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

解决方案

p>查看Opera软件的 uCSS库。

它可以帮助您以找到未使用的CSS，以及重复的CSS。此外，您还可以了解每个规则在您的标记中使用了多少次。

另一个很棒的选择： csscss 。

以Ruby编写并支持SASS，Less。

另一个很棒的选择：uncss 。

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

Probably any experienced web developer would be familiar with this problem: over time your css files can grow pretty huge and ugly because of all the no longer used selectors, which might be pretty tricky to find. I'm working on a rails project where we tend to re-design things quite frequently, which leads to a tonne of deadweight css. What's the best way to find and remove it?

Now, I do know that there is a rails plugin called deadweight built specifically for that purpose. However, here's my problem with deadweight: first of all, it completely ignores selectors used in javascript. Next, it scans only those pages that you configure it to scan which means there's a risk of removing something that is used on pages that you didn't scan for some reason. Finally, it finds unused selectors only in compiled css (we use LESS) - matching these against the actual code is a bit too involved.

I have also tried http://unused-css.com/ - they're great, but can't access localhost and, again, can only scan compiled CSS.

I really think there must be a better way of doing this. Actually, some time ago I decided to optimise one particular css file by grepping each selector in the entire project directory (emacs + rinari mode make it super-easy and super-fast), and each time I didn't see any html or css in the results I removed the style. Zero problems, worked like a charm. Obviously, I'm not going to do that for the entire site. However, I really don't believe that this couldn't be automated. Now, before I fire up my python and code this up, can anyone actually tell me if I'd be reinventing the wheel?

解决方案

Check out uCSS library from Opera Software.

It helps you to find unused CSS, as well as duplicate CSS. Also, you can get an overview of how many times each rule has been used in your markup. Several options are available by setting up a config file.

Update:

Another great alternative: csscss.

Written in Ruby and supports SASS, Less.

Update:

Another great alternative: uncss.

It works across multiple files and supports Javascript-injected CSS.

这篇关于未使用的css - 你怎么清理？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！