冲突的CSS规则如何影响性能？

Question

我正在清理一些旧的CSS，但不确定是否已注释掉或删除了所有冲突的规则。该项目使用了大量的CPU进行渲染，这就是为什么我问什么看起来相对较小的优化。

例如，如果我有这样的CSS，浏览器是否会花时间在规则color: red上？

span {
  color: red;
  color: black;
}

在同一块（上方）中的覆盖与下面的处理方式不同：

span {
  color: red;
}
span {
  color: black;
}

从CPU / GPU的角度来看，我有很好的资源可用于确切地处理规则吗？有关如何应用CSS规则的高层信息很多，但我想知道冲突的规则有何不同之处。就我而言，我可能忽略的冲突规则通常比上面给出的简单示例复杂得多，涉及多个选择器，渐变，阴影等。

Answer 1

简短：是的，它花费在构图上的时间比绘画多（它将合并到一个在Chrome DevTool中可见的计算版本）

长：在3G设备上推送的CSS大小，而不是内容的大小。当您将不必要的代码推送给每个人时，每一点事情都是重要的。

主要规则：通过PostCSS在本地或管道中优化该任务​​和其他简单任务：），甚至通过在线处理器进行优化。

最好：编写更好的代码，以便以后工作更少：D