CSS: Use tag type before ID?

Question

One of the guys here at work puts the tag name in front of all his CSS selectors for element ids. For example:

div#footer {

}

This, as opposed to just:

#footer {

}

His rationale is that this is a quicker lookup for most browsers because they don't need to check the id attributes of every type of element--just div elements. He also points out that this should be done with classes (e.g. div.header-label for <div class="header-label"... elements).

Sounds reasonable and rational, but is it true?

Answer 1

Your co-worker is wrong, it's exactly the opposite:

• https://developer.mozilla.org/en/Writing_Efficient_CSS
• http://code.google.com/intl/de-DE/speed/page-speed/docs/rendering.html

But also have in mind that CSS optimization is micro-optimization and finally just irrelevant in most cases:

• http://meiert.com/en/blog/20090312/performance-of-css-selectors/

Answer 2

It probably isn't true; the layout engine is likely to build a hashtable.

However, it definitely will not make a noticeable difference, unless your page has an insane number of elements. (In which case you've got worse problems)

You should use whichever selector more more readable.
Also, remember that someone might change #footer to a <span>.