如何识别未使用的 css 定义

How to identify unused css definitions

提问by jswanson

Are there any good approaches to help identify unused css definitions in a project? A bunch of css files were pulled in and now I'm trying to clean things up a bit.

有什么好的方法可以帮助识别项目中未使用的 css 定义吗？一堆 css 文件被拉进来，现在我正在尝试清理一些东西。

采纳答案by David Medinets

Take a look at the Firefox extension Dust-Me at https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/.

在https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/查看 Firefox 扩展 Dust-Me 。

回答by Derek Adair

Chrome Developer Toolshas an Auditstab which can show unused CSS selectors.

Chrome Developer Tools有一个Audits选项卡，可以显示未使用的 CSS 选择器。

Run an audit, then, under Web Page Performancesee Remove unused CSS rules

运行审核，然后在网页性能下查看删除未使用的 CSS 规则

回答by megaSteve4

I have just found this site – http://unused-css.com/

我刚刚找到了这个网站 – http://unused-css.com/

Looks good but I would need to thoroughly check its outputted 'clean' css before uploading it to any of my sites.

看起来不错，但在将其上传到我的任何网站之前，我需要彻底检查其输出的“干净”css。

Also as with all these tools I would need to check it didn't strip id's and classes with no style but are used as JavaScript selectors.

与所有这些工具一样，我需要检查它没有去除没有样式的 id 和类，而是用作 JavaScript 选择器。

The below content is taken from http://unused-css.com/so credit to them for recommending other solutions:

以下内容摘自http://unused-css.com/，因此感谢他们推荐其他解决方案：

Latish Sehgalhas written a windows application to find and remove unused CSS classes. I haven't tested it but from the description, you have to provide the path of your html files and one CSS file. The program will then list the unused CSS selectors. From the screenshot, it looks like there is no way to export this list or download a new clean CSS file. It also looks like the service is limited to one CSS file. If you have multiple files you want to clean, you have to clean them one by one.

Dust-Me Selectorsis a Firefox extension (for v1.5 or later) that finds unused CSS selectors. It extracts all the selectors from all the stylesheets on the page you're viewing, then analyzes that page to see which of those selectors are not used. The data is then stored so that when testing subsequent pages, selectors can be crossed off the list as they're encountered. This tool is supposed to be able to spider a whole website but I unfortunately could make it work. Also, I don't believe you can configure and download the CSS file with the styles removed.

Topstyleis a windows application including a bunch of tools to edit CSS. I haven't tested it much but it looks like it has the ability to removed unused CSS selectors. This software costs 80 USD.

Liquidcity CSS cleaneris a php script that uses regular expressions to check the styles of one page. It will tell you the classes that aren't available in the HTML code. I haven't tested this solution.

Deadweightis a CSS coverage tool. Given a set of stylesheets and a set of URLs, it determines which selectors are actually used and lists which can be "safely" deleted. This tool is a ruby module and will only work with rails website. The unused selectors have to be manually removed from the CSS file.

HeliumCSS is a javascript tool for discovering unused CSS across many pages on a web site. You first have to install the javascript file to the page you want to test. Then, you have to call a helium function to start the cleaning.

UnusedCSS.com is web application with an easy to use interface. Type the url of a site and you will get a list of CSS selectors. For each selector, a number indicates how many times a selector is used. This service has a few limitations. The @import statement is not supported. You can't configure and download the new clean CSS file.

CSSESSis a bookmarklet that helps you find unused CSS selectors on any site. This tool is pretty easy to use but it won't let you configure and download clean CSS files. It will only list unused CSS files.

Latish Sehgal编写了一个 windows 应用程序来查找和删除未使用的 CSS 类。我还没有测试过，但从描述来看，您必须提供 html 文件的路径和一个 CSS 文件。然后程序将列出未使用的 CSS 选择器。从屏幕截图来看，似乎无法导出此列表或下载新的干净 CSS 文件。看起来该服务也仅限于一个 CSS 文件。如果您有多个要清理的文件，则必须一个一个地清理它们。

Dust-Me Selectors是一个 Firefox 扩展（适用于 v1.5 或更高版本），用于查找未使用的 CSS 选择器。它从您正在查看的页面上的所有样式表中提取所有选择器，然后分析该页面以查看哪些选择器未被使用。然后存储数据，以便在测试后续页面时，可以在遇到选择器时从列表中划掉它们。这个工具应该能够抓取整个网站，但不幸的是我可以让它工作。另外，我不相信您可以配置和下载删除样式的 CSS 文件。

Topstyle是一个 Windows 应用程序，包括一堆编辑 CSS 的工具。我没有对其进行太多测试，但看起来它能够删除未使用的 CSS 选择器。该软件售价 80 美元。

Liquidcity CSS 清理器是一个 php 脚本，它使用正则表达式来检查一个页面的样式。它会告诉您 HTML 代码中不可用的类。我还没有测试过这个解决方案。

Deadweight是一个 CSS 覆盖工具。给定一组样式表和一组 URL，它确定实际使用了哪些选择器以及可以“安全”删除的列表。此工具是一个 ruby​​ 模块，仅适用于 rails 网站。未使用的选择器必须从 CSS 文件中手动删除。

HeliumCSS 是一个 javascript 工具，用于在网站的许多页面中发现未使用的 CSS。您首先必须将 javascript 文件安装到要测试的页面。然后，您必须调用氦功能来开始清洁。

UnusedCSS.com 是具有易于使用界面的 Web 应用程序。输入站点的 url，您将获得 CSS 选择器列表。对于每个选择器，一个数字表示一个选择器被使用的次数。此服务有一些限制。不支持 @import 语句。您无法配置和下载新的干净 CSS 文件。

CSSESS是一个书签，可帮助您在任何站点上找到未使用的 CSS 选择器。这个工具很容易使用，但它不会让你配置和下载干净的 CSS 文件。它只会列出未使用的 CSS 文件。

回答by Salman A

Google Page Speedcan do that for you (it actually does a whole lot more than just telling you which CSS is unused). On FireFox, it is available as a FireBug add-on. Then there is an online version too.

Google Page Speed可以为您做到这一点（它实际上做的不仅仅是告诉您哪个 CSS 未使用）。在 FireFox 上，它可以作为 FireBug 插件使用。然后也有一个在线版本。

回答by mjc

A Better CSS Minifierin C# dumps redundant styles;

C# 中更好的 CSS Minifier转储了多余的样式；

You would also want to use Dust-Me with this.

您还想将 Dust-Me 与此一起使用。

Keep in mind, if there is any content that is not currently visible to dust-me, you might throw out styles you need.

请记住，如果有任何内容当前对dust-me 不可见，您可能会丢弃您需要的样式。

EDIT: link was broken but archive.org has both the page and the code.

编辑：链接已损坏，但archive.org 有页面和代码。

回答by Somnath Muluk

CSS Usage

CSS 用法

Firebug extension to view which CSS rules are actually used.

Firebug 扩展来查看实际使用了哪些 CSS 规则。

CSS Usage is an extension for Firebug (thus necessary to have Firebug installed) that allows you to know unused CSS style rules. It identifies the CSS you use and don't use. It enables you to point out what unnecessary parts can be removed. You should definitely use this add-on to keep your CSS files as lightweight as possible.

CSS Usage 是 Firebug 的扩展（因此必须安装 Firebug），它允许您了解未使用的 CSS 样式规则。它标识您使用和不使用的 CSS。它使您能够指出可以删除哪些不必要的部分。你绝对应该使用这个插件来保持你的 CSS 文件尽可能轻量级。

回答by Josh

It looks like someone updated DustMe Selectors to work with Firefox again under a new name - 'CSS Roundup' http://blog.brothersmorrison.com/?p=198

看起来有人更新了 DustMe 选择器以使用新名称再次与 Firefox 一起使用 - “CSS Roundup” http://blog.brothersmorrison.com/?p=198

回答by Drew Noakes

Check out Google's PageSpeed for Firefox. It does this, and a whole load more.

查看Google 的 PageSpeed for Firefox。它做到了这一点，而且整个负载更多。

Apparently a Chrome plugin is under development as well.

显然 Chrome 插件也在开发中。

回答by Jitendra Vyas

Use Internet Explorer Developer Toolbar,s View > CSS Selector Matches: View a report of all style rules set and how many times they are used on the current page.

使用Internet Explorer 开发人员工具栏的视图 > CSS 选择器匹配：查看所有样式规则集以及它们在当前页面上使用的次数的报告。