CSS ID's vs Classes warnings when validating in CSS Lint

Question

I'm using XHTML (strict) to create a webpage - I cannot use HTML5 yet. When I run my CSS code through CSS Lint, I get the warning "Don't use IDs in selectors" several times.

I'm not sure why I'm getting these warnings. Should I be exclusively using classes instead of id's? I appreciate HTML 5 has the option to use semantic tags, but for now I need to stick with XHTML. Can anyone help?

Answer 1

Using ID's have a very strict specificity issue. Realistically, according to the standards, you can only use an ID once in any given HTML document. That doesn't mean you can't use ID's as styling selectors, though, it does come with dangerous pitfalls in larger projects. They're fine if you're using them as targets in Javascript. Go crazy.

CSS Lint is basically telling you that ID selectors are very, very specific in targeting elements and in return, you end up with problems later down the line dealing with CSS specificity. Class selectors are reusable and have much looser specificity. CSS Lint may be harmful, but in the eyes of many professional developers, styling with ID's doesn't have anything different that a class selector doesn't have, so why use them if they're causing specificity issues? Read this and this. They are both fantastic articles on why ID's are not cool for CSS. It is a personal preference, but, making your CSS very specific is a front-end disaster in all real-world cases web development.

Answer 2

You're perfectly fine to use IDs instead of classes. A lot of HTML validators would tell you otherwise, because they're written by people who don't like it.

It's entirely a style preference, and stating is as a rule is nonsense. Using IDs to style your HTML is perfectly valid CSS.

For more on this, see CSS Lint Is Harmful.