БЭМ-нейминг с глубокой вложенностью?

Question

[chegcheg]

Имеется такая структура:

<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>

Правильно ли именовал классы, учитывая следующее:

• .section - раздел страницы
  
• .features - "имя" раздела
  
• .inner - контейнер для выравнивания контента по горизонтали
  
• .features__block1 и .features__block2 - контейнеры для элементов
  
• .features__block1__item и .features__block2__item - элементы
  
• &__item__icon - субэлемент (не знаю как правильно обозвать)
  

Собственно, вопрос сводится к тому, правильно ли данное наименое - .features__block1__item, если в одном разделе страницы "хочется" расположить элементы с "припиской" &__item, но при этом они будут несколько отличатся друг от друга по смыслу/контенту?
Если нет, подскажите какой вариант будет верный.

Всем заранее спасибо!

Answer 1

[Сергей delphinpro]

У БЭМ не существует глубокой вложенности!
Блок -> Элемент
Всё.

Из этого и исходите.

Например

<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>

Comments

[chegcheg]

Суть в том, что .features__block1 и .features__block2 должны иметь разное оформление (не за счет модификаторов), соответственно и &__item в них также имеют абсолютно разное оформление.
Исходя же из вашего пример .features__block1 и .features__block2 - одинаковые элементы.

Важное уточнение: .features__block(n)__item могут находиться только внутри .features__block(n)

[Сергей delphinpro]

chegcheg, картинку засветите.

По вашим замечаниям:

Суть в том, что .features__block1 и .features__block2 должны иметь разное оформление

Возможно имеет смысл сделать их разными блоками. Раз они разные.

Важное уточнение: .features__block(n)__item могут находиться только внутри .features__block(n)

тогда так

.features__block(n)
  .features__item(n)

[chegcheg]

Сергей, а правильно ли будет внутри .features размещать блоки с именами, например, .features-for-b2b и .features-for-b2c?

[Сергей delphinpro]

chegcheg, любой блок может быть размещен где угодно.
Согласно БЭМ, элемент с классом ".features-for-b2b" является блоком.