如何识别未使用的CSS定义


414

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


当您说“在项目中”时,您的意思是什么?根据您使用的环境的不同,答案可能会有所不同。
伊恩·罗宾逊


我做了一个做得很好的工具。这是我的密码笔
toddmo

我写了一个脚本可以为您做到这一点:github.com/kgoedecke/unused-css-parser
Kevin Goedecke

Answers:


145

14
扩展在Firefox 4中
不起作用

5
此更新从未浮出水面,并且在SitePoint论坛上询问后,该插件似乎已失效。
Mike B

3
看来作者最近已经在他自己的网站上发布了更新版本,甚至是Opera的版本。退房brothercake.com
Funka

2
不幸的是,它不再起作用了
乔纳森(Jonathan)2015年

4
我写了一个替换书,在您的网站上爬了
Alex

259

Chrome开发者工具进行了审核标签,其中可以显示未使用的CSS选择器。

运行审核,然后在“ 网页性能”下,参阅“ 删除未使用的CSS规则”

在此处输入图片说明


64
太棒了,但是很糟糕,您不能在一组页面上运行它(否则,不可避免地会使用未使用的CSS规则)
Damon

17
我运行审核工具,它向我显示了未使用的CSS,但是如何使用它呢?我是否必须手动搜索每个项目并将其删除?
蒂莫西·亨利

19
这只是当前页面。它说“当前页面未使用的2445条CSS规则(占83%)”,因此并没有真正的帮助。
chhantyal

8
展开该项目时,您会得到未使用的实际规则的列表。虽然,这在您即时更改DOM的站点上没有帮助。
Howie 2015年

10
实际上,这只是移至覆盖范围-转到审计->底部控制台的旁边有一个菜单(3个垂直点类型菜单),您可以在那里选择覆盖范围。只需单击记录并导航。
格雷厄姆·里奇

65

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

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

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

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

拉丁语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代码中不可用的类。我尚未测试此解决方案。

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

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

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

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


5
只是请注意,unused-css.com不允许您在没有成为付费会员的情况下下载CSS,最低计划起价为每月29美元!对于我来说
georgiecasey

1
我将purifycss github.com/purifycss/purifycss添加到组合中。它是免费的,非常受欢迎(根据github中的星标),并且可以与单页应用程序一起使用。
德米特里·贡查尔

21

Google Page Speed可以为您做到这一点(实际上,它不仅可以告诉您未使用哪个CSS,还可以做很多工作)。在FireFox上,它可以作为FireBug插件使用。然后还有一个在线版本。


8

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

您还希望与此结合使用“ Dust-Me”。

请记住,如果有任何内容目前对我来说不可见,那么您可能会抛弃所需的样式。

编辑:链接已损坏,但archive.org同时具有页面和代码。


7

CSS用法

Firebug扩展,可查看实际使用的CSS规则。

CSS用法是Firebug的扩展(因此必须安装Firebug),使您可以了解未使用的CSS样式规则。它标识您使用和不使用的CSS。它使您指出可以删除哪些不必要的部分。您绝对应该使用此附加组件,以使CSS文件尽可能轻巧。




By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.