Независимость блоков BEM распространяется на блоки вкладок (tabs)?

Question

[coderlex]

В моей ситуации блок содержит вкладки (tabs), которые, конечно, тоже являются блоками. А значит через них нельзя (?) пробрасывать элементы из родительского блока, и приходится создавать субблоки вместо просто элементов. В итоге получается более раздробленная и запутанная структура. Причем логически выглядит необоснованным, когда просматриваешь код блока и наряду с обычными элементами видишь похожие вещи, но выделенные в отдельный блок.

Какова вообще позиция официальной методологии на этот счет, насколько было бы канонично не разбивать блок на отдельные подблоки ради вкладок?

P.S. Наглядный пример о чем идет речь:

<form class="product-form">
	<div class="product-form__group form-group"> ... </div>
	<div class="product-form__price-type-tabs tabs">
		<div class="tabs__item tabs__item--active" id="fixed-price-tab">
			<!-- Вместо: -->
			<div class="product-form__group form-group"> ... </div>
			<!-- Приходится делать: -->
			<div class="product-form-group"> ... </div>
			<!-- ... ради сохранении концепции БЭМ (?) -->
		</div>
		...
	</div>
</form>

Answer 1

[Олег]

Независимость распространяется на все.

Табы это самостоятельный блок, пример:

<div class="tabs">
  <div class="tabs__nav">Навигация</div>
  <div class="tabs__content">
    <div class="tabs__item">Таб 1</div>
    <div class="tabs__item">Таб 2</div>
  </div>
</div>

Для позиционирования данного блока используйте миксы или отдельную обертку:

<div class="tabs article__tabs">...</div> // микс

// обертка
<div class="article__tabs">
  <div class="tabs">...</div> 
</div>

Если табы на сайте разные по стилю, то разумно будет общие правила оставить блоку, а все остальное вынести в модификатор:
<div class="tabs tabs--article">...</div>

Comments

[coderlex]

Не совсем о том речь. Добавил пример, чтобы было нагляднее.

[Олег]

coderlex: В БЭМ допустима любая вложенность сущностей в HTML коде. Например:

<div class="block">
  <div class="another-block">
    <div class="block__el">
       <div class="block__another-el">
         <div class="another-block__el">...</div>
       </div>
    </div>
  </div>
</div>