如何从多个CSS文件中识别出未使用的CSS定义。

Question

已经引入了大量的CSS文件，现在我想稍微整理一下。

有什么有效的方法可以识别整个项目中未使用的CSS定义吗？

- jswanson

---

可能是如何查找网站中未使用的图像和CSS样式？ 的重复问题。 - ChrisWue

这个问题在Meta上进行了讨论。 - Trilarion

Answer 1

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

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

- Derek Adair

---

太棒了，但可惜你不能在一组页面上运行它（否则未使用的CSS规则可能不可避免）。 - Damon

我运行了审计工具，它向我展示了未使用的CSS，但是接下来该怎么做呢？我需要手动搜索每个项目并删除吗？ - Timothée HENRY

这只是当前页面。它显示“CSS的2445条规则（83％）未被当前页面使用”，所以并不是很有用。 - chhantyal

展开该项后，您会得到一份实际规则清单，但这些规则并未被使用。然而，在您需要动态更改文档对象模型的网站上，这并没有什么帮助。 - Howie

实际上，这个功能已经移到了覆盖范围 - 前往审计 -> 在下方的控制台旁边有一个菜单（3个垂直点类型的菜单），您可以在那里选择覆盖范围。只需点击记录并浏览即可。 - GrahamTheDevRel

Answer 2

我刚发现这个网站 - http://unused-css.com/

看起来不错，但在上传到任何一个我的站点之前，我需要仔细检查它输出的“干净”CSS。

另外，与所有这些工具一样，我需要检查它是否删除了没有样式但用作JavaScript选择器的id和class。

以下内容摘自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 cleaner 是一个 PHP 脚本，使用正则表达式检查一个页面的样式。它会告诉您 HTML 代码中不存在的类别。我没有测试过这个解决方案。

Deadweight 是一个 CSS 覆盖率工具。给定一组样式表和一组 URL，它确定哪些选择器实际上被使用，并列出哪些可以“安全”删除。此工具是一个 Ruby 模块，仅适用于 Rails 网站。未使用的选择器必须手动从 CSS 文件中删除。

Helium CSS 是一个 JavaScript 工具，可在网站的多个页面上发现未使用的 CSS。首先，您需要将 JavaScript 文件安装到要测试的页面上。然后，您必须调用 helium 函数来开始清理。

UnusedCSS.com 是一个易于使用的 Web 应用程序。输入站点的 URL，您将获得 CSS 选择器列表。对于每个选择器，数字表示选择器使用的次数。该服务有一些限制：不支持 @import 语句；无法配置和下载新的干净 CSS 文件。

CSSESS 是一个书签工具，可帮助您查找任何站点上未使用的 CSS 选择器。这个工具很容易使用，但它不能让您配置和下载干净的 CSS 文件，它只会列出未使用的 CSS 文件。

- megaSteve4

---

注意，unused-css.com不允许非付费会员下载CSS，而最低套餐每月29美元！对我来说，这项服务有点贵。 - georgiecasey

我会将 purifycss https://github.com/purifycss/purifycss 添加到混合中。它是免费的，相当受欢迎（根据 GitHub 上的 stars），并且适用于单页应用程序。 - Dmitry Gonchar

Answer 3

Google Chrome开发者工具有一个（目前处于实验阶段的）功能叫做CSS概述，它可以帮助您找到未使用的CSS规则。

要启用它，请按照以下步骤操作：

1. 打开DevTools（Mac上为Command+Option+I；Windows上为Control+Shift+I）
2. 转到DevTool设置（在Mac上为Function+F1；在Windows上为F1）
3. 点击打开“实验”部分
4. 启用CSS概述选项

- John Conde