我目前在一个100,000页的网站上工作,目前的设计已经存在了5年多,并且连续的更新已形成4个12,000+行的CSS文件。

显然,CSS变得笨拙,许多样式被复制,几乎不可能知道实际上使用了多少种样式。

我们可以精简一些,但这并不是真正解决问题,只是延迟了不可避免的返工。

所以三个问题有没有解决的方法。 。


去复制大型CSS文件?
扫描站点并记录CSS类和ID的使用?
可以使用某种脚本(例如lublessmonkey)来实现这种扫描吗?


#1 楼

http://unused-css.com/做了一些您要问的事情,他们这样说:-

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

Dust-Me Selectors是Firefox扩展(适用于v1.5或更高版本),用于查找未使用的CSS选择器。它从您正在查看的页面上的所有样式表中提取所有选择器,然后分析该页面以查看哪些未使用的选择器。然后存储数据,以便在测试后续页面时,选择器可以在遇到时从列表中删除。该工具原本应该可以覆盖整个网站,但是很不幸,我可以使它正常工作。另外,我不相信您可以配置并下载样式已删除的CSS文件。

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文件。