如何识别未使用的CSS定义[关闭]

StackOverflow https://stackoverflow.com/questions/135657

题

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

其他提示

Chrome开发者工具有一个审核标签，可以显示未使用的CSS选择器。

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

我刚刚找到这个网站＆＃8211; 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清洁工是一个php脚本，它使用正则表达式检查样式一页。它会告诉您HTML代码中没有的类。我还没有测试过这个解决方案。

     

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

     

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

     

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

     

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

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

CSS使用情况

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

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

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

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

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

显然，Chrome插件也在开发中。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top