一堆 CSS 文件被拉进来,现在我正在尝试清理一下。
如何有效地识别整个项目中未使用的 CSS 定义?
我刚刚找到了这个网站——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 清理器是一个 php 脚本,它使用正则表达式来检查一个页面的样式。它将告诉您 HTML 代码中不可用的类。我没有测试过这个解决方案。
Deadweight是一个 CSS 覆盖工具。给定一组样式表和一组 URL,它会确定实际使用哪些选择器以及可以“安全”删除的列表。该工具是一个 ruby 模块,仅适用于 rails 网站。必须从 CSS 文件中手动删除未使用的选择器。
Helium CSS 是一个 javascript 工具,用于发现网站上许多页面中未使用的 CSS。您首先必须将 javascript 文件安装到要测试的页面。然后,您必须调用氦功能来开始清洁。
UnusedCSS.com 是具有易于使用的界面的 Web 应用程序。键入站点的 url,您将获得 CSS 选择器列表。对于每个选择器,一个数字表示一个选择器被使用了多少次。此服务有一些限制。不支持 @import 语句。您无法配置和下载新的干净 CSS 文件。
CSSESS是一个小书签,可帮助您在任何站点上找到未使用的 CSS 选择器。这个工具很容易使用,但它不会让你配置和下载干净的 CSS 文件。它只会列出未使用的 CSS 文件。
Google Chrome 开发者工具有一个(目前是实验性的)功能,叫做CSS 概览,它可以让你找到未使用的 CSS 规则。
要启用它,请执行以下步骤: