Recently I came across the post by Matt Wilcox Called CSS Lint is Harmful Speaking of the Useful Free Tool CSS Lint . The suggestion "Do not use identifiers in selectors" seems to have the most offended Matt, but I was surprised that many commentators also mentioned this as being a reason to avoid CSS Lint. That surprised me because intelligent people said preferred classes to identity cards for a moment now. The article was light on why this suggestion might be bad, but it boils down to:

Performance: IDs are "the fastest way a browser can select a given item"
If they are already in the markup, it is best to use them for CSS
I've used identifiers as forever … waddya means I should not use them !?


It's a common belief that ID selectors are the fastest, but this comes with a big caveat: IDs are the fastest CSS selector only if they are the key selector. What is it? Well, while you probably read the selectors from left to right, read them from right to left .

#Home to {…}

We usually read this selector as finding the element with id = "home", then apply these styles to each it contains. That should be super fast, right? After all, there should be only one id = "home" on the page. However, browsers read differently: find each element, then check if its parent element is id = "home", and otherwise continue to check for parent elements until you find them or reach them . It's much less powerful than our mental model.

As you have deduced, the key selector is the rightmost key selector (a in #home a {…}). So, what kind of performance difference does it really make? I used CSS Test Creator from Steve Souders and I did three tests that I recorded locally. Each test has 1,000 items selected for the use of identifiers, classes or individual identifiers with selectors, e.g. for ID's:

# id0001 {…}
# id0002 {…}
# id0003 {…}

# id1000 {…}

I then reloaded the pages several times to get average page loading times (in Chrome 12, except for the initial loading of the page)

Selector performance for 1000 elements (in ms)
# id …
# id … a

So for 1000 rules, IDs are faster by one millisecond than classes as a key selector. Yes, the difference in performance between classes and IDs is not relevant . The most common scenario of using an ID for 'namespace' an element (where the element is the key selector) is actually slower than the use of a class, but the difference of 13 milliseconds observed is not relevant. This is also true for the few extra bytes that it takes to add a class to something that already has an ID, eg. changing