БЭМ — Как правильно унаследовать элемент дочернего блока?

Question

[ViT93]

Имеется блок "user" с элементом "user__avatar".

<div class="user">
    <img  class="user__avatar" src="/public/images/avatars/1.jpg">
</div>

Требуется скопировать этот блок в <header>

<header class="header">
  <div class="user header__user">
    <img class="user__avatar" src="/public/images/avatars/1.jpg">
  </div>
</header>

Блоку user мы добавили класс header__user для того, чтобы сделать например отступы.

Внимание вопрос! Требуется изменить размеры аватара в header, как правильно сделать это используя БЭМ?

Добавить класс "header__avatar" к элементу "user__avatar"?

Или так "header__user-avatar"?

Весь вечер ломаю голову, читал официальную документацию, где описывается только добавления класса к дочернему блоку, но не к элементу дочернего блока.

Спасибо!

Answer 1

[Арсений Матыцин]

Если есть возможность, используй модификатор для дочернего элемента блока юзер.
Если ты собираешься существенно изменить свойства блока — создавай новый блок. Чтобы в будущем не оказаться в ловушке у кода.
Можешь сделать обращение напрямую к блоку изображения (да, надо, чтобы изображение в таком случае тоже было блоком. Атомарность етить ее)., либо просто к изображению.

В целом первый вариант предпочтителен. Так как остальные могу спокойно привести не туда. Хотя первый и приведет к добавлению кода везде.

А твой вопрос в документации тут, в рубрике «как хотите, так и еб...» (На сайте не пашут анкоры, так что просто глянь, что в адресной строке и докрути).

Впрочем, в целом, такое обычно делать и не приходится. Жестко так миксовать в смысле. В этом и заключается принцип БЭМ, «взболтать, не смешивать».

Comments

[ViT93]

Как раз на этом сайте и читал, там плохо разжевали как миксовать:( спасибо за ответ, буду пытаться по полочкам у себя в голове все разложить. Думаю модификатор может решить мою проблему. А наследование в CSS не будет верным решением?
.header .user__avatar {} (Хотя вроде БЭМ и выступает противником наследования)

[Арсений Матыцин]

ViT93, потому что, как я говорю, миксы это то, от чего уводит данная методология.Типовые элементы существенно облегчают работу как верстале, так и дизайнеру (читай UI-guides). Да и на выходе меньше кода.

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

Короче, пользуйтесь. Рекомендую.

[ViT93]

То есть, я должен блоки прорабатывать так чтобы они всегда были независимы. Допустим возьмём список пользовалей. Список имен пользователей в колонку, мне захотелось в каком то месте сайта расположить все имена в строчку. Я добавляю модификатор и радуюсь жизни?)

[Арсений Матыцин]

ViT93, «должен» не применимо к методологиям. Но в целом да.

Это не так сложно, как кажется, особенно если взять в расчет некоторый опыт и знание, как смешивать методологии. У меня в проектах давно все лежит отдельно друг от друга за исключением общих настроек.

[ViT93]

Арсений Матыцин, буду пробовать. Спасибо за ответы:)

Answer 2

[Виталий Першин]

user__avatar_size_small
user__avatar_size_large