BEM - How to correctly inherit an element of a child block?

Question

BEM

There is a "user" block with a "user_avatar" element.

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

Copy this block to<header>

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

We added the header_user class to the user block in order to make indents, for example.

Attention question! I need to change the size of the avatar in the header, how to do it correctly using BEM?

Add "header__avatar" class to "user__avatar" element?

Or so "header__user-avatar"?

I've been scratching my head all evening, reading the official documentation, which describes only adding a class to a child block, but not to an element of a child block.

Thank you!

Answer 1

If possible, use a modifier for the child element of the user block.
If you are going to significantly change the properties of a block, create a new block. In order not to be trapped by the code in the future.
You can make a call directly to the image block (yes, the image must also be a block in this case. Atomicity etit it), or just to the image.
In general, the first option is preferable. Since the rest I can safely lead to the wrong place. Although the first one will result in code being added everywhere.
And your question is in the documentation here, in the heading “ whatever you want, so fuck ... ” (Anchors are not plowed on the site, so just look at what is in the address bar and turn it up).
However, in general, this is usually not necessary. It's tough to mix like that. This is the principle of BEM, "shake it, don't mix it."

Answer 2

user_avatar_size_small
user_avatar_size_large