Здравствуйте! Помогите пожалуйста разобраться с методологией БЭМ на примере. Есть HTML:
<div class="block">
<p class="block__paragraph">Some text</p>
<span class="block__fragment">Some fragment</span>
</div>
Нужно стилизовать селекторы block__paragraph
и block__fragment
блока block
. В дизайне оба селектора имеют одинаковый цвет и подчеркивание.
Вариант 1
.block {
color: red;
text-decoration: underline;
}
В результате элементы block__paragraph
и block__fragment
УНАСЛЕДУЮТ color
и text-decoration
. Нужно понимать, что так как они ЭЛЕМЕНТЫ, то НЕ БУДУТ использоваться вне блока.
Вариант 2
.block__paragraph {
color: red;
text-decoration: underline;
}
.block__fragment {
color: red;
text-decoration: underline;
}
Здесь мы просто копируем одинаковые свойства КАЖДОМУ элементу (много одинакового кода).
Скажите пожалуйста, какой вариант по методологии БЭМ верный? Может есть ссылка на ту часть документации, которая дает ответ на вопрос.
Спасибо.
Методология не отменяет здравый смысл.
Если есть некий блок, в котором весь текст внутри имеет одинаковый цвет и стиль подчеркивания (либо какой-то цвет можно явно считать базовым), то эти свойства логично задать самому блоку.
Если же внутри окажется множество самых разных элементов с разнообразным оформлением, то лучше задавать такие свойства точечно, а с дублированием разберется оптимизатор при сборке путем склеивания селекторов для одинаковых стилей.
Спасибо огромное за помощь! Скажите еще пожалуйста, "а с дублированием разберется оптимизатор при сборке путем склеивания селекторов для одинаковых стилей" - погуглил, нашел gulp-css-purge. Он подойдет, или есть лучшие решения?
Круче всех сейчас жмет CSSO. Плагин для
gulp
есть в документации.