Optimize markup for CSS rendering speed?

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Optimize markup for CSS rendering speed?

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
greyhoundcode
Forum Regular
Posts: 613
Joined: Mon Feb 11, 2008 4:22 am

Re: Optimize markup for CSS rendering speed?

Post 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?
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Optimize markup for CSS rendering speed?

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
Darhazer
DevNet Resident
Posts: 1011
Joined: Thu May 14, 2009 3:00 pm
Location: HellCity, Bulgaria

Re: Optimize markup for CSS rendering speed?

Post by Darhazer »

User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Optimize markup for CSS rendering speed?

Post by pickle »

Good link ~Darhazer - I guess that kind of answers it.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
greyhoundcode
Forum Regular
Posts: 613
Joined: Mon Feb 11, 2008 4:22 am

Re: Optimize markup for CSS rendering speed?

Post by greyhoundcode »

It's fantastic that someone would take the time to do that kind of analysis.
Post Reply