Какие можно задать классы заголовкам, если есть 3 заголовка с разными цветами?

Question

[olya_097]

Какие можно задать классы заголовкам, если есть 3 заголовка с разными цветами?

Comments

[Иван Фронтендов]

1. Вы уверены, что все три именно заголовки?
2. Без контекста что либо придумать сложно. Вы хотя бы приложили скрин макета, из которого была бы ясна семантическая разница этих заголовков.

[Ankhena]

Нужно понять логику почему они написаны разными цветами
- это заголовки разного уровня
- зависят от содержимого (например, это фирменные цвета)
- зависят от порядкового номера блока (т.е. первый блок всегда будет иметь красный заголовок вне зависимости от содержимого, второй желтый и т.д.)

В зависимости от этого и писать модификаторы или менять теги.

Answer 1

[Сергей delphinpro]

Нужно понять, что означают эти цвета.
Можно тупо сделать модификаторы, как предложил DanKud:

<h2 class="heading heading_red">
...
</h2>

Но это плохо тем, что впоследствии heading_red может стать желтым, или в полоску. И если уж так писать, то лучше использовать param_value модификатор:

<h2 class="heading heading_theme_red">
...
</h2>

В общем случае, без оглядки на макет, более правильно будет в названии класса описать его назначение:

<h2 class="heading heading_primary">...</h2>
<h2 class="heading heading_secondary">...</h2>

Answer 2

[DanKud]

Ну исходя из той же методологии БЭМ например нужно прописать общие свойства для блока и добавить к нему модификатор. Примерно как-то так:

.header {
    общие_свойства_для_всех_заголовков
}
.header_red {
    свойства_только_для_заголовка_этого_цвета
}
.header_green {
    свойства_только_для_заголовка_этого_цвета
}
.header_blue {
    свойства_только_для_заголовка_этого_цвета
}

<div class="header header_red"></div>
<div class="header header_green"></div>
<div class="header header_blue"></div>

Comments

[Владислав]

Или по стилю Two Dashes в БЭМ:

.header {
    общие_свойства_для_всех_заголовков
}
.header--red {
    свойства_только_для_заголовка_этого_цвета
}
.header--green {
    свойства_только_для_заголовка_этого_цвета
}
.header--blue {
    свойства_только_для_заголовка_этого_цвета
}

Answer 3

[Islam Ibakaev]

.title {color: black; font-size: 30px;}
.title--color2 {color: red;}
.title--color3 {color: green;}
.title--big {font-size: 60px;}

<h1 class="title title--color3 title--big"></h1>