CSS Styling: Should I specify the element type?

Question

Which of the following is better code:

div#style1{
}

or

#style1{
}

Also, should the element type be specified for classes or not?

Answer 1

It depends what you mean by "better".

Because of the way the style system matches rules, #style1 is faster than div#style1 (and the same goes for classes). For this reason, conventional wisdom is that the former, less-qualified selector is better.

However, it may be that div#style1 is more easily understood by the next person¹ editing the CSS than #style1 (in the specific case you give, probably not - but, for example, the meaning of a selector like a.external is immediately obvious to anyone reading it in a way that a bare .external isn't).

In cases like that, you have to decide which is more important: making your CSS as straightforward as possible to maintain, or making it (perhaps only very slightly) faster to render.

---

¹ Maybe you in eighteen months, maybe someone else entirely.

• hkk: How much of a difference in speed would it make?
• user19131: @cloudcoder2000 that's going to depend on your specific code - if rendering speed is an issue, test it; if not, don't waste time worrying about it.
• cimmanon: The performance penalty for anything other than class or id is almost always greatly exaggerated: stevesouders.com/blog/2009/03/10/…