RU
ihorzenich
ihorzenich
28 October 2016

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
#tadatuta
28 October 2016

Yes for both questions.

nicothin
#nicothin
24 November 2016

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

vithar
#vithar
24 November 2016

Still yes for both questions.

nicothin
#nicothin
24 November 2016

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

tadatuta
#tadatuta
24 November 2016

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
#ivangretsky
7 March 2017

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
#tadatuta
7 March 2017

@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
#ivangretsky
9 March 2017

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
#tadatuta
9 March 2017

@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
#ivangretsky
9 March 2017

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

ivangretsky
#ivangretsky
20 March 2017

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
#tadatuta
20 March 2017

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