如何通过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只是指出在div元素上放置“display：block”是多余的，因为它是div元素的默认值，那么这是一个我不知道答案的不同故事。

Answer 2

DevTools (Chrome 59)有CSS and JS code coverage

单击右上方devtool > more tools > coverage中的三个点，然后单击“重新加载”按钮

qazxsw poi用于qazxsw poi用于点击每个文件进行检查。