2

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.

  • font-family might not be the best example. Set the font to the body, and only specify the exceptions (as you should do in css). – Martijn Jul 18 '16 at 13:08
  • 1
    Are we talking about faster rendering or a faster download? – xpy Jul 18 '16 at 15:51
  • My bad, I should have said that I meant faster download and not rendering! – Mr. Uselessrobot Jul 18 '16 at 16:52
  • Unless your CSS is stupidly 'BIG' reducing it by 40% isn't going to make a 'REAL WORLD' difference. Most of the improvements are made by reducing the amount of server side requests, i.e resources. Also use selectors... *{font-family:Arial;} or p:not(.classy){font-family:Arial;} or body *:not(p){font-family:Arial;} etc. – Simon Hayter Jul 18 '16 at 17:10
3

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.

0

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.

  • Firstly, it's "minify" not "minimize". Second, minifying hardly reduces the difference between the two examples, the second one is still notably smaller. The best saving comes from gzipping, that's what will make the different 'irrelevant'. – DisgruntledGoat Jul 20 '16 at 12:12
  • Wow, and you voted this down because you don't know how to edit? This is correct answer, because it's really irrelevant in css when you MINIFY it. – Josip Ivic Jul 20 '16 at 12:14
  • size of css is really irrelevant for page speed. – Josip Ivic Jul 20 '16 at 12:16
  • Here ya go, I edited answer, you can vote it up or remove a downvote now. – Josip Ivic Jul 20 '16 at 12:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.