Headings should be defined only once.

Question

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

h4 { color: red; } .archive h4 { color: green; } 

Bearing in mind that I am already using h1-h6 styles elsewhere in the design.

Would it be better to use classes for this and then inherit styles using mix-ins (I use a stylus)?

 h4 { color: red; } .archive-header { color: green; } 

While I am, why csslint warns about this? Is there performance?

Answer 1

• To get around this, be sure ... you have to work fine.
• CSS Lint warns about this because you shouldn't create the same headings in different ways. Here is a little excerpt from an article that talks more about the subject :

  When creating headers (or really something), we want to accomplish three big goals:

  • DRY . Do not repeat yourself. We want to set the headers once and never (normally, rarely!) Repeat these font styles or selectors. This will simplify the work of our site.
  • Predictable . The title should look the same no matter where it is on the page. This will make it easier to create new pages and content.
  • Keep the specification low and the selector as simple as possible . This will help increase productivity and speed up the process of creating a site over time.

• No performance. Anyway, it might even be better to use a class name instead of a tag. The solution you proposed is almost a tutorial recommendation on how to make your site faster than Google .