423

一堆 CSS 文件被拉进来,现在我正在尝试清理一下。

如何有效地识别整个项目中未使用的 CSS 定义?

4

3 回答 3

264

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

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

在此处输入图像描述

于 2010-06-24T19:08:36.790 回答
66

我刚刚找到了这个网站——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 文件。

于 2011-06-08T17:18:34.573 回答
2

Google Chrome 开发者工具有一个(目前是实验性的)功能,叫做CSS 概览,它可以让你找到未使用的 CSS 规则。

要启用它,请执行以下步骤:

  1. 打开 DevTools(Mac 上的 Command+Option+I;Windows 上的 Control+Shift+I)
  2. 前往 DevTool 设置(Mac 上的功能+F1;Windows 上的 F1)
  3. 点击打开实验部分
  4. 启用 CSS 概览选项

在此处输入图像描述

于 2020-07-04T17:58:28.183 回答