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.

Naevus

I have no idea what 2 and 3 mean either. – Publicness

Many of the warnings generated by CSS Lint are either dubious, or opinionated. Tread carefully! – Gid

Relevant to my opinion: mattwilcox.net/archive/entry/id/1054 – Gid

thanks @Gid for the article. While some of the CSS Lint warnings didnt make sense & I agree with the author of the article, I think it did help as well. As usual, its best to know what one is getting into rather than blindly following orders. Best, – Naevus

csslint.org has its documentation of errors/warnings at github.com/stubbornella/csslint/wiki/Rules documenting their reasoning on their opinions. – Siler

Does a philosophy exist for modern CSS? Is box-sizing: border-box mainly for legacy Internet Explorer-like code? Should, e.g. width, generally be untouched from its default 'auto' and use grid column width to control total width of column element(s) then use border or padding freely knowing that the total width is already taken care of by container (grid column)? I.e. For modern CSS, do better alternatives exist that preclude use of width / height with padding/border altogether? – Rigsby

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.

Hibben

@Kayote: you’re very welcome — sorry the Stack Overflow community didn’t have more information. – Hibben

Regardless, its the best community out there. Its amazing just how quickly and amazingly Stackexchange has taken over the web. :) CHeers – Naevus

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.

Shanika

The box model warning is so wierd. A padding does not remove the use for setting a width. Even on this page, most elements have padding + width/height – Meditation

Padding does not make the use for a width redundant, but as Fantaz pointed out, they warn you because of potential wrong calculations (as stated here) – Travis

@Travis "Warnings" like that should be categorically different to a warning like "Don't use units for 0 values e.g. 0px". The former is saying "be careful", the latter is advice on generally accepted style. – Sextillion