C
C
coderlex2017-01-08 05:23:55
HTML
coderlex, 2017-01-08 05:23:55

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

1 answer(s)
O
Oleg, 2017-01-08
@werty1001

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>

To position this block, use mixes or a separate wrapper:
<div class="tabs article__tabs">...</div> // микс

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

If the tabs on the site are different in style, then it would be reasonable to leave the general rules to the block, and put everything else into a modifier:
<div class="tabs tabs--article">...</div>

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question