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.

Answer 2

If you go through http://csslint.net/about.html, it says the following:

1. Don't use IDs in selectors

IDs shouldn't be used in selectors because these rules are too tightly coupled with the HTML and have no possibility of reuse. It's much preferred to use classes in selectors and then apply a class to an element in the page.

2. Beware of broken box models

Borders and padding add space outside of an element's content. Setting width or height along with borders and padding is usually a mistake because you won't get the visual result you're looking for. CSS Lint warns when a rule uses width or height in addition to padding and/or border.

I think IDs were made for a reason, and if you do the calculations right, you dont need to worry about the broken box model.