bem-element outside the bem-block and block-elements intersection in DOM tree

[ihorzenich]

AFAIK, somewhere I have seen proof of the following things. Please confirm or disprove.

1) As DOM-tree and BEM-tree aren't required be the same, it's possible that the BEM-element is physically located outside its BEM-block in DOM and it is valid.

<div class="block">
…
</div>
<div class="block__element"> … </div>

2) For the same reason the elements of one block can be nested in another block, making intersection in the DOM-tree like:

.block1
     .block2
         .block1__el
         .block2__el

or even like this:

.block1
     .block2
         .block1__el
             .block2__el

[tadatuta]

Yes for both questions.

[nicothin]

@tadatuta пример был изменен и теперь ваш ответ некорректен, 1 — ошибка. http://take.ms/u3ZsS — добавления.

[vithar]

Still yes for both questions.

[nicothin]

Уверен, что стоит дать примеры случаев, когда такое возможно и оправдано. Равно как и пояснение из слака веб-стандартов, что элемент не может присутствовать на странице, если на ней нет его блока. Иначе, такая формулировка может быть трактована превратно. А значит, будет трактована превратно.

[tadatuta]

Here's an example:

<div class="tabbed-pane">
    <ul class="tabbed-pane__tabs">
        <li class="tabbed-pane__tab"></li>
        <li class="tabbed-pane__tab"></li>
    </ul>
</div>
<div class="any-other-block">...which breaks tabs and pannels apart</div>
<div class="tabbed-pane__pannels">
    <div class="tabbed-pane__pannel"></div>
    <div class="tabbed-pane__pannel"></div>
</div>

NB: now we need to join tabbed-pane__pannels with its parent tabbed-pane block via JS somehow.

[ivangretsky]

Can we take it a little further? Is this (wrapping block with its element) considered valid within bem:

<div class="section intro__wrap">
  <div class="intro">
    ...
  </div>
</div>

I think I saw it a few times on some google sites)) (Thought they have it on http://megafon.ru too, but it turns out there is just body__wrapper without any body there))

The code above could be indeed useful for styling sections of site instead of adding (too specific) modifiers like section--intro / section_intro.

[tadatuta]

@ivangretsky I have ready answer in Russian here: https://ru.bem.info/forum/656/

In short: there's no reason to use wrappers at all. Your example should be refactored like this:

<div class="section intro">
  <div class="intro__inner">
    ...
  </div>
</div>

[ivangretsky]

I got your point. But that is not the answer to the original question in general. How should we treat the situation with a block wrapped by its element? Do you think it is still valid BEM?

[tadatuta]

@ivangretsky please provide real-life case so we can decide. In general it should be possible at least to have block and its element mixed on the same DOM node instead of wrapping block into element.

[ivangretsky]

Here it is: https://getmdl.io/ mdl-layout is wrapped in mdl-layout__container

[ivangretsky]

Here is another example - this time from one of the Yandex services: https://music.yandex.ru/artist/147089/albums sidebar block is inside sidebar__placeholder element. Can this be considered a "Yes" to my question?

[tadatuta]

@ivangretsky don't you think that both cases should be just toggled?

Why not to replace mdl-layout__container with mdl-layout and vice versa? And the same for sidebar and sidebar__placeholder. In both cases we will get markup easier to reason about and without any drawbacks.