如何识别未使用的CSS定义

CSS

卡卡西卡卡西

2020-03-19

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

第2340篇《如何识别未使用的CSS定义》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

9个回答
十三村村蛋蛋 2020.03.19

似乎有人更新了DustMe Selectors,使其以新名称-“ CSS Roundup”再次与Firefox一起使用 http://blog.brothersmorrison.com/?p=198

理查德Mandy 2020.03.19

查看Google的Firefox版PageSpeed它这样做,并且整个负载更多。

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

神奇Davaid 2020.03.19

使用Internet Explorer开发者工具栏的“ 视图”>“ CSS选择器匹配项”:查看所有样式规则集的报告以及它们在当前页面上使用了多少次。

乐小宇宙 2020.03.19

我刚刚找到此网站– 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代码中不可用的类。我尚未测试此解决方案。

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

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

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

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

阿飞A 2020.03.19

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

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

在此处输入图片说明

神奇村村 2020.03.19

CSS用法

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

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

Tom西里 2020.03.19
西里神无Pro 2020.03.19

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

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

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

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

布雷西 2020.03.19

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android