stubbornella/csslint — Issue #233: Header redefinition rules counterproductive
Author: Synchro
Created: 2012-02-08 11:09:16+00:00
State: open

While I get the idea behind only defining H tags once, the overly simplistic rule implementation provokes bad coding and has an effect opposite to what is intended. For example this ugly, repetitive, 'procedural' code would be considered good even though it's horribly unmaintainable:
```h1 {
font-size: 2.2em;
font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans", Tahoma, sans-serif;
padding: 0.4em 0em 0.4em;
text-shadow: 0.15em 0.15em 0.4em #BBBBBB;
font-weight: 700;
margin: 0;
line-height: 1.0em;
}
h2 {
font-size: 1.8em;
font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans", Tahoma, sans-serif;
padding: 0.4em 0em 0.4em;
text-shadow: 0.15em 0.15em 0.4em #BBBBBB;
font-weight: 700;
margin: 0;
line-height: 1.0em;
}```
whereas this far more elegant (and far more 'OO') syntax would be flagged with a warning:
```h1, h2 {
font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans", Tahoma, sans-serif;
padding: 0.4em 0em 0.4em;
text-shadow: 0.15em 0.15em 0.4em #BBBBBB;
font-weight: 700;
margin: 0;
line-height: 1.0em;
}
h1 {
font-size: 2.2em;
}
h2 {
font-size: 1.8em;
}```
I have similar feelings about not using qualifiers on headings, for example say you have two areas of a site, some of which has a dark background, and some a light one. You might use these styles:
```h1 {
color: black;
}
.dark h1 {
color: white;
}```
This would be flagged with a warning. The workaround would be to have separate style sheets for light and dark pages, which is a maintainability disaster, yet would not provoke any warnings. Alternatively, you could implement all headings as classes on P tags (which would not generate any warnings), though that would break semantics which is even worse.

For maintainability, a way better solution than trying to optimise the CSS directly is to abstract it using a meta-language such as LESS or SASS, which simply avoids most of the problems.