How do conflicting CSS rules affect performance?

Question

I'm cleaning up some old CSS and I'm not sure I've commented out or removed all the conflicting rules. The project uses a lot of CPU for rendering, which is why I ask about what seems like a relatively small optimization.

For example, if I had CSS like this, does the browser spend time on the rule color: red ?

span {
  color: red;
  color: black;
}

Is overriding within the same block (above) handled differently than the below:

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

Is there a good resource I can refer to for exactly how rules are processed from a CPU/GPU standpoint? There's plenty of info on the high level of how CSS rules are applied, but I'm wondering how much of a difference conflicting rules make. In my case, conflicting rules I may have overlooked are generally much more complicated than the simple example I gave above, involving multiple selectors, gradients, shadows, etc.

Answer 1

Short: yes, it spend some time more to composition than paint (it will merge to one computed version which is visible in Chrome DevTool)

Long: It is more about size of CSS that you push on 3G devices rather than composition. Every bites mater as you push unnecessary code to everyone.

Main rule: Optimize that and other simple task by PostCSS, locally or in pipeline :) Or even by online processor.

Best: Write better code so less work afterwards :D