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.