未使用的 CSS - 你如何清理它? [英] Unused css - how do you clean it up?

问题描述

可能任何有经验的 Web 开发人员都会熟悉这个问题:随着时间的推移，您的 css 文件会变得非常庞大和丑陋，因为所有不再使用的选择器可能很难找到.我正在做一个 Rails 项目，我们倾向于经常重新设计东西，这会导致大量的自重 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?

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

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.

我也尝试过 http://unused-css.com/ - 它们很棒，但是无法访问 localhost，并且只能扫描编译后的 CSS.

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

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

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?

推荐答案

查看 Opera 的 uCSS 库软件.

Check out uCSS library from Opera Software.

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

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.

更新:

另一个不错的选择:csscss.

用 Ruby 编写，支持 SASS、Less.

Written in Ruby and supports SASS, Less.

更新:

另一个不错的选择:uncss.

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

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

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