CSS 删除未使用的样式

Question

我经常通过在 head 中的 base.css 下面添加一个(示例)override.css 来覆盖“基本”css 样式我的网站。

base.css:

a { color: blue; }

然后在 override.css 中:

a { color: red; }

这可能是一种不好的做法，但根据我的经验，在大多数网站中这是一种非常常见的做法。在这种非常简化的情况下，css 文件的大小将是原来的两倍。

是否有任何自动化工具可以删除所有未使用的样式，并且只向访问者呈现“已解析”的 css 文件？例如，Prestashop 中的 CSS CCC 选项会为我做这个吗？

Answer 1

如果您正在寻找一种自动方法，https://github.com/giakki/uncss

但是，chrome devtools 还包括一个用于查看所有未使用样式的漂亮面板，因此很可能最好通过它手动完成。如何使用覆盖面板:https://blog.logrocket.com/using-the-chrome-devtools-new-code-coverage-feature-ca96c3dddcaf