Question

Just ran a decent amount of css through csslint, mainly to check for errors. 80% of the warnings I get are from defining the same header element more than once. So I was wondering what the best way to clean up these kind of styles would be…

h4 {
    color: red;
}

.archive h4 {
    color: green;
}

Keeping in mind I’m already using h1 – h6 styles elsewhere in the design.

Would it be better to use classes for this and then inherit the styles with mix-ins (i’m using stylus)?

h4 {
    color: red;
}

.archive-header {
    color: green;
}

While i’m at it, why does csslint warn against this? Are there performance hits?

Answer 1

1. To get around it, sure… you’re solution should work just fine.
2. CSS Lint warns against it because you shouldn’t style the same headers differently. Here’s a little excerpt from an article talking more about the subject:

When styling headings (or really anything) we want three big goals to be met:

1. DRY – Do not repeat yourself. We want to set headings once and never (ok, rarely!) repeat those font styles or selectors. This will make our site easier to maintain.
2. Predictable – The heading should look the same no matter where on the page it is placed. This will make creating new pages and content easier.
3. Keep specificity low and selectors as simple as possible. This will help with performance and keep the site from growing more and more tangled over time.

No performance hits. If anything, it might even be better to use a class name instead of a tag. The solution you proposed is almost a textbook recommendation of how to make your website faster by Google.