如何通过 Chrome 查找和删除未使用的 CSS [重复]答案

【问题标题】：How to find and remove unused CSS by Chrome [duplicate]如何通过 Chrome 查找和删除未使用的 CSS [重复]
【发布时间】：2022-02-10 22:35:57
【问题描述】：

Chrome 开发者工具会显示未使用 CSS 的百分比，并列出所有未使用的规则。

Google Chrome 似乎只显示未使用的规则。它有什么帮助？

如何删除未使用的规则，而不是从每个 CSS 文件中一一删除？

【问题讨论】：

How to identify unused css definitions 的可能重复项。通过快速搜索，可以轻松找到网络上的这个和其他答案。解决您的问题的最佳方法可能是丢弃所有现有的 CSS 并重写它。
要求我们建议、查找或推荐书籍、工具、软件库、插件、教程、解释技术或提供任何其他场外资源的问题对于 Stack Overflow Stack 来说是题外话溢出
我不同意@Paulie_D：stackoverflow.com/help/on-topic：if your question generally covers… software tools commonly used by programmers; and is ..then you’re in the right place to ask your question!。对我来说，这是主题。 OP 不问第三方工具，只问内置的谷歌 Chrome 开发者工具。
请取消删除stackoverflow.com/a/45971784/1422096，这是目前最好的答案，截图很好！
@user663031，不，它不是重复的。您可以使用的链接是关于“如何识别”，而这里是“如何删除它们”。

【解决方案1】：

DevTools (Chrome 59) 具有 CSS 和 JavaScript 代码覆盖率。

点击右上角的三个点，devtool → more tools → coverage 并点击Reload 按钮。

red 未使用。
使用green。
单击每个文件进行检查。

【讨论】：

【解决方案2】：

说实话，很难定义什么是未使用的 CSS 规则。想象一下：

一些global.css文件

.classA {
   font-size: 12px;
}
.classB {
   font-size: 14px;
}

文件page1.html

<div class="classA">
</div>

文件page2.html

<div class="classA classB">
</div>

从技术上讲，在 page1 中，classA 有 100% 的 CSS 规则被使用和应用，而在 page2 中，它们被完全覆盖。这算作未使用的规则吗？如果是这样，那么这样做将非常危险，因为很明显你会删除你不知道的东西的样式。

如果不是，Chrome 只是指出在 div 元素上放置“display: block”是多余的，因为它是 div 元素的默认值，那么这是一个不同的故事，我不知道答案。

【讨论】：