Answer the question
In order to leave comments, you need to log in
Does BEM block independence extend to tab blocks?
In my situation, the block contains tabs (tabs), which, of course, are also blocks. This means that you can’t (?) pass elements from the parent block through them, and you have to create subblocks instead of just elements. The result is a more fragmented and intricate structure. Moreover, it looks logically unreasonable when you look through the code of the block and, along with the usual elements, you see similar things, but highlighted in a separate block.
What is the general position of the official methodology on this matter, how canonical it would be not to break the block into separate subblocks for the sake of tabs?
PS A good example of what is at stake:
<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 the question
In order to leave comments, you need to log in
Independence extends to everything.
Tabs are a separate block, example:
<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>
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question