Войти с помощью github
Форум /

Здравствуйте! Помогите пожалуйста разобраться с методологией БЭМ на примере. Есть 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;
 }

Здесь мы просто копируем одинаковые свойства КАЖДОМУ элементу (много одинакового кода).

Скажите пожалуйста, какой вариант по методологии БЭМ верный? Может есть ссылка на ту часть документации, которая дает ответ на вопрос.

Спасибо.