[marcosdumay]

I have as a rule that if you are in a situation where there can only be 1 element with those properties (it would make no sense at all to have more), I should use the id.

The top elements are one example. It makes no sense to include them inside any other element, and if that ever changes, all the styling will need to change anyway.

[mradmin]

What if you had a requirement to create variation styles of those elements? How would you do that? Would you add you base style in your id selector, and then variations with classes? Again, you'll face specificity issues with that approach. Keeping things simple is the best approach here IMO. I've done a heck-load of CSS and have seen how hacky a stylesheet can become because of specificity issues. Sticking with classes and keeping selectors short will make your stylesheet easier to follow and more maintainable, but this is just my approach!

[tragic]

> I have as a rule that if you are in a situation where there can only be 1 element with those properties (it would make no sense at all to have more), I should use the id.

Not a good idea: IDs take massive priority over classes in the cascade.

As someone who often has to override an enormous stylesheet which is all styled to IDs, this is a serious pain point.

Simple example: http://jsfiddle.net/B7tSz/