Making sense of CSS Lint warnings

Question

I am writing the CSS for our website and I just ran it through CSS Lint. I'm struggling making sense of quite a few of the warnings so would greatly the community's assistance.

1. Don't use IDs in selectors.

   Isn't that the point of the IDs? To be used to address a particular element on the page?

2. 2 IDs in the selector, really?

   Is there a better way of selecting an element rather than using two selectors in the same line?

3. Broken box model: using height with border-top.

   I have no idea what this means. My understanding is that box height is separate to border height. I have defined a height for the element than then the border sides are being individually defined, where am I going wrong?

4. Heading (h1) should not be qualified.

Answer 1

I haven’t used CSS Lint, so I’m not sure about most of these. But regarding 2., “2 IDs in the selector”, I guess they’re flagging it because it’s likely to be redundant. An ID selector indicates that the element is unique on the page. So if you’re using two IDs in the selector, e.g. #main #navigation, you could probably just as easily use the last one, e.g. #navigation.

However, if you’re using the higher ID to e.g. indicate what kind of page you’re on, that looks fine to me.

There are quite a lot of well-intentioned CSS folks who are very keen to tell you what you should and shouldn’t do, regardless of what you’re trying to do.