如何识别未使用的CSS定义

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

1> Derek Adair..：

---

Chrome开发者工具有一个Audits选项卡,可以显示未使用的CSS选择器.

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

---

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

---

这只是当前页面.它说"2445规则(83%)的CSS没有被当前页面使用",所以不太有用.

---

我运行审计工具,它显示我未使用的CSS,但如何使用它呢？我是否必须手动搜索每个项目并将其删除？

---

展开项目时,您将获得未使用的实际规则列表.虽然,它对您即时更改DOM的站点没有帮助.

---

实际上这已经转移到覆盖范围 - 转到审核 - >底部的控制台旁边有一个菜单(3个垂直点类型菜单),你可以在那里选择覆盖.只需单击记录并导航即可.

2> David Medine..：

---

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

---

扩展在Firefox 4中不起作用

---

此更新从未浮出水面,在SitePoint论坛上询问后,该插件似乎已经死了.

---

我写了一个替代品,在你的网站上抓取多个页面(递归链接):https://www.jitbit.com/unusedcss/

---

看起来作者最近在他自己的网站上发布了一个更新版本,甚至是Opera版本.查看http://www.brothercake.com

---

不幸的是不再有效

3> megaSteve4..：

---

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

看起来不错,但我需要彻底检查其输出的'干净'css,然后再将其上传到我的任何网站.

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

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

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

Dust-Me选择器是一个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文件.

---

请注意,如果不是付费会员,unused-css.com不允许您下载CSS,最低计划每月29美元起!对我来说服务似乎有点贵

4> Salman A..：

---

谷歌页面速度可以为你做到这一点(它实际上做的不仅仅是告诉你哪些CSS未被使用).在FireFox上,它可以作为FireBug插件使用.然后还有一个在线版本.

5> mjc..：

---

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

你也想用Dust-Me.

请记住,如果有任何内容目前看不到尘埃,我可能会抛弃您需要的样式.

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

6> Somnath Mulu..：

---

CSS用法

Firebug扩展,用于查看实际使用的CSS规则.

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

7> 小智..：

---

它看起来像有人更新DustMe选择器与Firefox再次以新名称的工作- "CSS综述: http://blog.brothersmorrison.com/?p=198