Зависимость элемента от реализации дочернего элемента, допустима по БЭМ?

Question

[Andrei Popov]

<div class="content">
       <div class="content__text-block">
	        <div class="content__head">Крупный текст</div>
	        <div class="content__desc">обычный текст</div>
        </div>
</div>

.content
   &__text-block
      font-size: 1.2rem
   &__head
      font-size: 2em
   &__desc
      font-size: 1em

Правильно ли по БЭМ, если размер шрифта элемента зависит от реализации родительского элемента?
Или в таких случаях необходимо сделать элемент text-block блоком?

Comments

[Сергей delphinpro]

.content_text_large .content__text-block {
}

допустимо.

Но если меняется только .content__text-block то лучше модификатор повесить на него. Модификатор на весь блок желательно вешать только он затрагивает изменение нескольких элементов. Но и это не аксиома.

БЭМ вас не сильно ограничивает. Нужно смотреть по ситуации, по проекту, и делать так, как будет удобнее, расширяемее, создаст меньше проблем в будущем. Смотрите на два шага вперед.

[Andrei Popov]

Сергей delphinpro, Спасибо!

Answer 1

[Александр Присяжнюк]

Ну во-первых, нужно поработать над семантикой в html. Сборная div-янка это совсем не круто.
Вот два варианта реализации:
1)

<section class="content">
  <div class="content__text-wrap">
    <h2 class="content__title">Заголовок</h2>
    <p class="content__descr">Блок с текстом</p>
  </div>
</section>

2)

<section class="content">
  <div class="content__text-wrap article">
    <h2 class="article__title">Заголовок</h2>
    <p class="article__descr">Блок с текстом</p>
  </div>
</section>

А по поводу размера шрифта: большой разницы нет, всё зависит от контекста. Не забывайте про модификаторы. Верстать можно и так и сяк и наперекосяк.

Comments

[Сергей delphinpro]

С семантикой тоже не надо борщить. СЕОшники любят доебаться, что ты навтыкал заголовков где попало. И спорить с ними бесполезно.
Но если используешь тег h2-h6 — будь любезен сверстать так, что если его поменяют на div или p? верстка не поползет. Равно как и наоборот.

[Andrei Popov]

Спасибо, с семантикой понятно, код для примера написал)