Заголовки следует указывать только один раз

Question

Просто запустил приличное количество css через csslint, в основном для проверки на наличие ошибок. 80% предупреждений я получаю от определения одного и того же элемента заголовка более одного раза. Так что мне было интересно, что лучший способ очистки такого рода стилей было бы ...

h4 { 
    color: red; 
} 

.archive h4 { 
    color: green; 
} 

Имея в виду, я уже использую h1 - h6 стили в другом месте в дизайне.

Было бы лучше использовать классы для этого, а затем наследовать стили с помощью микширования (я использую стилус)?

h4 { 
    color: red; 
} 

.archive-header { 
    color: green; 
} 

В то время как я нахожусь, почему csslint предупреждает об этом? Есть ли хиты производительности?

Answer 1

1. Чтобы обойти это, обязательно ... вы должны работать нормально.
2. CSS Линт предупреждает об этом, потому что вы не должны создавать одинаковые заголовки по-разному. Вот небольшой отрывок из article talking more about the subject:

   При укладке заголовки (или на самом деле ничего) мы хотим три большие цели, которые должны быть выполнены:

   1. DRY - Не повторяй себя. Мы хотим установить заголовки один раз и никогда (нормально, редко!) Повторять эти стили шрифтов или селекторов. Это упростит работу нашего сайта.
   2. Предсказуемый - Заголовок должен выглядеть одинаково независимо от того, где находится на его странице. Это упростит создание новых страниц и контента.
   3. Держите специфику низкой и селекторы максимально простой. Это поможет повысить производительность и будет препятствовать тому, чтобы сайт со временем становился все более запутанным.

3. Отсутствие производительности. Во всяком случае, может быть даже better использовать имя класса вместо тега. Решение, которое вы предложили, представляет собой почти рекомендацию учебника от how to make your website faster by Google.