Optimize markup for CSS rendering speed?
Posted: Tue Dec 07, 2010 4:34 pm
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:
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:
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: Then use CSS like:
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.
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>Code: Select all
#header ul{}
#header li{}
#header a{}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>Code: Select all
#header-ul{}
#header-li-1,#header-li-2{}
#header-li-1-a-1,#header-li-2-a-1"{}Has anyone else encountered this philosophical quagmire? At what point does optimizing for CSS negatively affect performance? Does anyone here care?
Discuss.