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

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>.

Answer 2

I personally don't think that performance could be an issue here, unless many styles needs to be changed dinamically.

In any case the two examples are semantically different since #footer will cover cases which div#footer won't. So aside from personal taste we're talking about two different things. Then if you are really using ID as they should be used there's no difference at all..

Answer 3

The only time this would be a useful practice, IMHO, is when you have multiple tag types using the same ID, which is of course, invalid anyway. However, if you were given a piece of invalid HTML/CSS to start with, and couldn't fix it properly, using TAGTYPE#ID might be useful.

Answer 4

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 5

Attaching the tag to the id is more specific. You can create an id in your css that you can apply to ANY element, but if you attach the tag name you can ONLY use those rules for THAT (unless you list other elements, classes or id's with a comma) tag with THAT id see:

http://www.w3.org/TR/CSS2/selector.html#id-selectors

Answer 6

It's hard to imagine a valid use for this CSS "feature".

Suppose a form has a year field.

input#year {
    width: 4em;
}

This would prevent the rule from applying if, for instance, the field were rendered as a select.

As for the performance factor, I think @Dave does the best debunking.