如何识别未使用的CSS定义

Question

有没有好的方法来帮助识别项目中未使用的CSS定义？一堆css文件被拉进来，现在我正试图清理一下。

Answer 1

Chrome Developer Tools有一个审核标签，可以显示未使用的CSS选择器。

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

Answer 2

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

Answer 3

我刚刚找到此网站 - http://unused-css.com/

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

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

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

  

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

     

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

     

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

     

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

     

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

     

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

     

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

     

CSSESS是一个书签，可以帮助您在任何网站上找到未使用的CSS选择器。该工具非常易于使用，但它不允许您配置和下载干净的CSS文件。它只会列出未使用的CSS文件。

Answer 4

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

Answer 5

C＃中的

A Better CSS Minifier转储冗余样式;

您还希望使用Dust-Me。

请注意，如果有任何内容目前无法显示给我，那么您可能会抛弃所需的样式。

编辑：链接已被破坏，但archive.org同时包含页面和代码。

Answer 6

CSS Usage

Firebug扩展程序，用于查看实际使用的CSS规则。

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

Answer 7

看起来有人更新了DustMe Selectors，再次以新名称使用Firefox - 'CSS Roundup' http://blog.brothersmorrison.com/?p=198

Answer 8

使用Internet Explorer Developer Toolbar，s 查看＆gt; CSS选择器匹配：查看所有样式规则集的报告以及它们在当前页面上的使用次数。

Answer 9

Answer 10

Google Chrome开发者工具具有CSS Overview（目前处于实验状态）功能，可让您查找未使用的CSS规则。

要启用它，请按照以下步骤操作：

1. 打开DevTools（在Mac上为Command + Option + I；在Windows上为Control + Shift + I）
2. 转到DevTool设置（在Mac上为Function + F1；在Windows上为F1）
3. 点击打开“实验”部分
4. 启用CSS概述选项