Вопрос по вёрстке главной страницы яндекса.

Форум /

Изучаю вёрстку с БЭМ-именованием классов. Решил посмотреть как свёрстана главная страница яндекса. И увидел такую ситуацию:

<div class="container headline"> <div class="row"> <div class="col headline__item headline__leftcorner"> ... </div> <div class="col headline__item headline__center"> </div> <div class="col headline__item headline__bar"> ... </div> </div> </div>

В блок row вложены элементы блока headline. Не противоречит ли это тому, что элементы одного блока не могут быть элементами другого блока?

8 years ago

qfox

@mmmaximaxxx Элементы headline__item являются элементами блока headline и не являются элементами блока row или container — т.е. не противоречит.

Могут ли быть вложены элементы одного блока в другой в DOM-дереве? Могут. Именно это и происходит в приложенном примере.

<!-- микс из двух блоков -->
<div class="container headline">
  <div class="row">
    <!-- микс из блока col и элементов headline -->
    <div class="col headline__item headline__leftcorner"> ... </div>
  </div>
</div>

Таким образом, DOM-дерево существует отдельно от BEM-дерева, т.е. они абстрагированы друг от друга и связаны классами на DOM-узлах и JS-объектами фреймворка i-bem.

Чтобы оставлять комментарии, необходимо авторизоваться.