如何通过chrome查找和删除未使用的css

Question

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

谷歌浏览器似乎只显示未使用的规则我想知道它有何帮助？

应该从每个css文件中逐个删除显示未使用的规则吗？

Answer 1

很难定义未使用的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规则在第2页中被使用和应用，它们被完全覆盖。这算作未使用的规则吗？如果是这样的话那么这样做会非常危险，因为显然你会删除那些你不知道的东西。

如果没有，Chrome只是指出put＆＃34; display：block＆＃34;在div元素上是多余的，因为它是div元素的默认值，那么这是一个我不知道答案的不同故事。

Answer 2

DevTools (Chrome 59)具有2017.3.5 ver.

点击右上角CSS and JS code coverage的三个点，然后点击重新加载按钮

devtool > more tools > coverage未上载 使用red 单击每个文件进行检查。