1

Lately I have been stacking selectors with matching properties into one rule, thinking it's more efficient like so:

.logo, .menu, .format h2, .format h3, .format h4, .format h5, .format h6, #footer {
    font-family: 'Compressed Light', sans-serif;
    font-weight: 200;
    font-style: normal;
    font-variant: small-caps;
}

.logo {
    font-size: 3.692307692em; /* 48px / 13px */
    line-height: 100%;
}

I then set the other font properties like sizing and line height in separate rules.

Would it be more efficient to use shorthand, including all the properties, even if I'll need as many rules for sizing?

.logo {
    font: normal small-caps 200 3.692307692em/100% 'Compressed Light', sans-serif; /* 48px / 13px */
}

Which style does the browser process more quickly?

Jeff Sebring
  • 131
  • 5
  • 3
    "Just looking to save ms loading wherever I can." What for? – BoltClock Oct 04 '11 at 21:37
  • @BoltClock I'd just like answers to the specific question please. If you don't think it's worth answering, move on. I'd rather not waste my time addressing people who aren't answering the actual question I asked. You are asking me why I want to increase website performance? Really? – Jeff Sebring Oct 04 '11 at 21:52
  • @JeffSebring "More efficient CSS" is very vague. Do you mean downloading time, or page-drawing, time, or ??? – Nightfirecat Oct 04 '11 at 22:01
  • 1
    P.S. @BoltClock made a valid point - unless you're running a monster site with thousands of lines of CSS, and hundreds of rules, it will make little difference. – Nightfirecat Oct 04 '11 at 22:02
  • I'd rather not waste my time mulling over mere milliseconds. Ciao. – BoltClock Oct 04 '11 at 22:06
  • @Nightfirecat Both really. I know it will make little difference. The point of the question is to develop better habits and styles of writing css. I don't understand the people that will post to tell me my question isn't worth the time to answer because it won't make much difference. If there is no difference at all, please explain. – Jeff Sebring Oct 04 '11 at 22:18

1 Answers1

2

If you want to optimize performance, it is a better idea to look for a CSS minifier.

Just keep your CSS readable, it's more important.

If you want to lean more about CSS performance, look at this question: Is there more to optimizing CSS than minimizing character count?. But IMHO, most of the time, the speed of a website is a matter of bandwith, not HTML/CSS parsing.

Community
  • 1
  • 1
Benjamin Crouzier
  • 40,265
  • 44
  • 171
  • 236
  • 1
    Don't use google searches in your answers, suggest a few / two you prefer, then you can suggest a search :) – sg3s Oct 04 '11 at 21:54
  • This isn't an answer. It is another way to optimize that I'm already aware of. The wiki doesn't address what I'm asking. – Jeff Sebring Oct 04 '11 at 21:55
  • Agree that the download differences will be trivial. A more relevant question might be which style the browser processes more quickly, but I suspect there's very little difference there as well. Follow basic rules about [efficient selectors](http://www.stevesouders.com/blog/2009/06/18/simplifying-css-selectors/) and combine and minimize in production. Beyond that, use what is more readable and maintainable. – steveax Oct 04 '11 at 21:58
  • @steveax Updated with your better formed question. Thanks. – Jeff Sebring Oct 04 '11 at 22:21