With the recent launch of http://csslint.net, I'm questioning some ways I've constructed my stylesheets in the past. The following method is one that I've used recently:
/* Fonts */
h1 { font-size:20px }
p { font-size:12px }
/* Colors */
h1 { color:green }
p { color:grey;
background-color:white }
/* Margins */
h1 { margin:0 }
p { margin:0 0 5px }
The problem, according to the linter, is that I'm re-declaring heading selectors over and over again. The reason of course is to keep logical separation between types of rules. If I wish to change colors, I would visit the colors region. If I wish to change dimensions, I would visit the dimensional areas.
Is CSSLint worried that I may be in danger of overwriting styles, thus wasting chars, or are there performance issue related to how many blocks contribute to the overall presentation of heading elements?
Is this a bad practice, or merely a false-alarm?
Styles get computed for all h1s and all ps either way. The overhead of selector matching is little compared to the equally-negligible performance "impact" of actually computing and rendering the styles.
I'm guessing what you think CSS Lint is worried about is the case. In fact, I kinda like how you organize your styles myself, and don't see any other problems than overwriting declarations by accident.