How to name BEM classes?

Question

css

There is a structure like this:

<div class="block">
      <div class="row">
        <div class="logo"></div>
        <div class="icon1"></div>
        <div class="icon2"></div>
        <div class="btn"></div>
      </div>
    </div>

    <div class="block">
      <div class="row">
        <div class="cell">
          <div class="avatar"></div>
        </div>
        <div class="cell">
          <div class="name">Uername</div>
          <div class="name">Info</div>
        </div>
      </div>  
      <div class="row">
        <div class="cell">
          <div class="btn1"></div>
        </div>
        <div class="cell">
          <div class="btn2"></div>
        </div>
      </div>
      <div class="row">
        <div class="cell">
          <div class="btn3"></div>
        </div>
      </div>
    </div>

I am attaching a screenshot of what it looks like.

Please tell me how to correctly name the classes in accordance with BEM technology.
I read a lot about it, but I don’t quite understand it, especially when one is nested in another and the nesting depth is more than 2.

Answer 1

Since you have read about BEM, I won’t go into too much theory and will draw an example by the ears and describe how I would think and name HTML elements using the example of a logo.
Everyone chooses according to which system to understand: where is the block, where is the element, and where is the modifier. How they do it in Yandex is described in the BEM documentation , I will stick to this method of naming
Classes should be assigned after you have decided: is this a block or an element? Or maybe a modifier.
I paint on the example of the logo:
First, I would understand that this is a block in the BEM value system and named the class like this " logo " (the block is a self-sufficient element).
Suppose later I would need a flat logo on some pages of the site. It turns out that I will be doing a modification of the logo. Realizing that this is a modifier, I would add the following classes: " logo logo_flat " -- the class of the block " logo " and, accordingly, the class of the modifier " logo_flat "
Further, if I needed to place text in the logo (company name, slogan, etc.). Then I would first understand - is it a block, is it an element or a modifier? Clearly not a modifier (no CSS modification is added to existing elements), meaning a block or element. According to the BEM methodology, a block is a self-sufficient unit, and an element cannot exist outside of a block. Accordingly, the text inside the logo is an element. In the logo block, I would place the text in an HTML element and assign the class " logo__company-name " (the element class includes the name of the block as a prefix. This is due to the fact that the element can only exist in the context of the block)