Page 1 of 1

Optimize markup for CSS rendering speed?

Posted: Tue Dec 07, 2010 4:34 pm
by pickle
Not a problem - just a question & discussion point

I've recently seen a couple articles online about optimizing your CSS - stuff like using short hand properties and fast selectors. The gist of it is that you should use ids as much as possible as they are the most efficient, and tags as little as possible, as they are the least efficient.

Take some example markup:

Code: Select all

<div id = "header">
  <ul>
    <li>
      <a />
    </li>
    <li>
      <a />
    </li>
  </ul>
</div>
From the standpoint of keeping the markup simple, this is fine. In CSS, you can style the <ul>, <li>, and <a> with selectors like this:

Code: Select all

#header ul{}
#header li{}
#header a{}
However, apparently that's bad, as CSS selectors apparently work right to left. So, for the first declaration the CSS selector engine would first find all <ul>, then see if any of them reside in #header.

To optimize the markup for CSS, one could do this:

Code: Select all

<div id = "header">
  <ul id = "header-ul">
    <li id = "header-li-1">
      <a id = "header-li-1-a-1"/>
    </li>
    <li id = "header-li-2">
      <a id = "header-li-2-a-1"/>
    </li>
  </ul>
</div>
Then use CSS like:

Code: Select all

#header-ul{}
#header-li-1,#header-li-2{}
#header-li-1-a-1,#header-li-2-a-1"{}
However, in my mind that's ridiculous. At a certain point, the added text in the markup and resulting download speeds offset any benefits you get from faster CSS rendering.

Has anyone else encountered this philosophical quagmire? At what point does optimizing for CSS negatively affect performance? Does anyone here care?

Discuss.

Re: Optimize markup for CSS rendering speed?

Posted: Thu Dec 09, 2010 3:37 pm
by greyhoundcode
I suppose the fact is I for one don't really care. :)

Actually hadn't heard of this before to be honest: is there supposed to be (or is it claimed that there is) a significant performance improvement from the practices you mentioned?

Is the "right to left" behaviour typical of most web rendering engines?

Re: Optimize markup for CSS rendering speed?

Posted: Thu Dec 09, 2010 3:49 pm
by pickle
I've never seen any numbers about speed-up, so maybe this is just FUD-like.

The articles I read made no distinction about which rendering engines they were talking about, so I took that to mean that was how all rendering engines worked.

Re: Optimize markup for CSS rendering speed?

Posted: Fri Dec 10, 2010 4:32 am
by Darhazer

Re: Optimize markup for CSS rendering speed?

Posted: Fri Dec 10, 2010 9:49 am
by pickle
Good link ~Darhazer - I guess that kind of answers it.

Re: Optimize markup for CSS rendering speed?

Posted: Sat Dec 11, 2010 1:56 am
by greyhoundcode
It's fantastic that someone would take the time to do that kind of analysis.