@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"?

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

Спасибо!
  • Вопрос задан
  • 83 просмотра
Решения вопроса 1
ArsenyMatytsyn
@ArsenyMatytsyn
CEO iAmStudio, предприниматель.
Если есть возможность, используй модификатор для дочернего элемента блока юзер.
Если ты собираешься существенно изменить свойства блока — создавай новый блок. Чтобы в будущем не оказаться в ловушке у кода.
Можешь сделать обращение напрямую к блоку изображения (да, надо, чтобы изображение в таком случае тоже было блоком. Атомарность етить ее)., либо просто к изображению.

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

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы