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
Yes for both questions.
@tadatuta пример был изменен и теперь ваш ответ некорректен, 1 — ошибка. http://take.ms/u3ZsS — добавления.
Still yes for both questions.
Уверен, что стоит дать примеры случаев, когда такое возможно и оправдано. Равно как и пояснение из слака веб-стандартов, что элемент не может присутствовать на странице, если на ней нет его блока. Иначе, такая формулировка может быть трактована превратно. А значит, будет трактована превратно.
Here's an example:
NB: now we need to join
tabbed-pane__pannels
with its parenttabbed-pane
block via JS somehow.Can we take it a little further? Is this (wrapping block with its element) considered valid within bem:
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.
@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:
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?
@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.
Here it is: https://getmdl.io/
mdl-layout
is wrapped inmdl-layout__container
Here is another example - this time from one of the Yandex services: https://music.yandex.ru/artist/147089/albums
sidebar
block is insidesidebar__placeholder
element. Can this be considered a "Yes" to my question?@ivangretsky don't you think that both cases should be just toggled?
Why not to replace
mdl-layout__container
withmdl-layout
and vice versa? And the same forsidebar
andsidebar__placeholder
. In both cases we will get markup easier to reason about and without any drawbacks.