重构大型/旧CSS文件



我目前正在开发一个100000页的网站,目前的设计已经实施了5年多,连续更新产生了四个12000多行的CSS文件。

显然,CSS已经变得笨拙,许多样式都是重复的,而且几乎不可能知道实际使用了多少样式。

我们可以缩小,但这并不是真正解决问题,只是推迟了不可避免的返工。

因此,有三个问题是,是否有工具可用于。。。

  • 消除大型CSS文件的重复
  • 扫描网站并记录CSS类和ID的使用
  • 这样的扫描可以用某种脚本实现吗,也许是Greasemonkey

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代码中不可用的类。我还没有测试过这个解决方案。

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

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

UnusedCSS.com是一个界面简单易用的web应用程序。键入一个网站的url,你会得到一个CSS选择器列表。对于每个选择器,一个数字表示一个选择器的使用次数。此服务有一些限制。不支持@import语句。您无法配置和下载新的干净CSS文件。

CSESS是一个小书签,可以帮助您在任何网站上查找未使用的CSS选择器。这个工具很容易使用,但它不允许您配置和下载干净的CSS文件。它将只列出未使用的CSS文件。

如果您使用的是Visual Studio,此扩展有助于自动合并css类。

最新更新