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 回答