How much recyling CSS makes my website faster?

Question

I'll give you two examples to clarify what I'm trying to say.

Example 1:

p {
  font-family: Arial;
}
#id1 {
  font-family: Arial;
}
.class1 {
  font-family: Arial;
}
#id2 {
  font-family: Arial;
}
.class2 {
font-family: Arial;
}

Example 2:

p, #id1, .class1, #id2, .class2 {
  font-family: Arial;
}

Example 2 is a much more condensate and organized code and as far as I understand, the CSS parser of the browser will create a new branch in the rendering tree for every selector I create.

That means the browser has to work more in Example 1 and therefore it needs more time for processing the request. Is that correct?

If so, is that even relevant or quantifiable? Because I feel you should never write a code as written in Example 1 but I'm not sure how much this affects the final user.

Answer 1

The only part of that, where the browser would work harder, is having to parse the extra few characters for each selector. Insignificantly so because the majority of the work is done on creating a CSS Object Model, finding the elements, and applying the property values for each element.

For something as small as applying font families, it's far easier to do your example #2 or, better, apply it to a parent element which will cascade down to those elements; if that's possible.

But there are many, many far more important things to work on to increase site speed than this.

Answer 2

It's really irrelevant, because you should minify any .css file that goes up.

Your code is your signature.

If you don't know how to minify .css -> here's the link.

But.. from my perspective... I never write code like in Example 2, and it's little bit "wrong" to write css like that unless you are 100% sure that that's it; because if you change anything in it, it reflects on all classes and ID's. If you change anything in Example one, it only reflects on that class and/or ID.