BEM naming with deep nesting?

Question

HTML

There is a structure like this:

<div class="section features">
  <div class="title">
    <h2>Заголовок</h2>
    <div class="title__subtitle">Подзаголовок</div>
  </div>
  <div class="inner">
    <div class="features__block1">
      <div class="features__block1__item">
        <div class="features__block1__item__icon">
          <img src="images/icon1.png" alt="" />
        </div>
        <div class="features__block1__item__text">
          Текст текст текст текст текст
        </div>
      </div>
    </div>
    <div class="features__block2">
      <div class="features__block2__item">
        <div class="features__block2__item__icon">
          <img src="images/icon1.png" alt="" />
        </div>
        <div class="features__block2__item__text">
          Текст текст текст текст текст
        </div>
      </div>
    </div>
  </div>
</div>

Did I name the classes correctly, given the following:

• .section- page section
  
• .features- section "name"
  
• .inner- container for aligning content horizontally
  
• .features__block1and .features__block2- containers for elements
  
• .features__block1__itemand .features__block2__item- elements
  
• &__item__icon- subelement (I don't know how to call it correctly)
  

Actually, the question boils down to whether the given name is correct - .features__block1__itemif in one section of the page you "want" to place elements with a "script" &__item, but at the same time they will differ slightly from each other in meaning / content?
If not, please advise which option is correct.
Thank you all in advance!

Answer 1

BEM doesn't have deep nesting!
Block -> Element
All.
Start from this.
for example

<div class="section">
  <div class="title">
    <h2>Заголовок</h2>
    <div class="title__subtitle">Подзаголовок</div>
  </div>
  <div class="inner features">
    <div class="features__item">
      <div class="block">
        <div class="block__icon">
          <img class="block__image" src="images/icon1.png" alt="" />
        </div>
        <div class="block__text">Текст текст текст текст текст</div>
      </div>
    </div>
    <div class="features__item">
      <div class="block">
        <div class="block__icon">
          <img class="block__image" src="images/icon1.png" alt="" />
        </div>
        <div class="block__text">Текст текст текст текст текст</div>
      </div>
    </div>
  </div>
</div>