using type selectors with id not efficient

mathieu · February 25th, 2010, 11:52 AM

On page 12, Mr. York recommends including a type selector with the id selector in CSS; for example, "div#thisID".

This practice is called inefficient by Mozilla; see https://developer.mozilla.org/en/Writing_Efficient_CSS.

So my question is, who is correct? Mr. York may want to fully qualify the CSS specification for easy recognition by programmers, but does this have a performance cost?

samjudson · February 25th, 2010, 12:10 PM

They are both correct.

Richard is talking about things from a stylistic and maintenance point of view. The Mozilla article is written from a performance stand-point.

If performance is the biggest criteria in your application then follow the Mozilla guidelines. If you want more readable and maintainable code that is easier to debug and work with and can afford whatever small performance hit it costs then follow the books guidelines.

After all, they are both just guidelines, not strict rules. I would recommend trying to pick one and stick with it though, just to be consistent.

richard.york · February 25th, 2010, 12:10 PM

In all my years of programming I've never noticed any performance degradation.

I guess if you're making a really long page with thousands and thousands of elements, you'd see a performance cost. But if I were in that situation, I would be more concerned about why I needed so much content in one page than I would be about how I wrote my style sheet.

In the end, I prefer including the type selector, because I find it easier to read and easier to relate what's styling what, and I think that's more important than a minor milliseconds level performance cost. You are, of course, your own person, so do what's right for you.