kizu/bemto

Можно ли как-то получить наследование имени блока на уровень выше?

Closed this issue · 3 comments

есть:

+b.HEADER.c-header
    +b.o-container
        +b.A.c-logo(title='На Главную')
            +e.IMG.picture(src='assets/img/logo-main.svg')
        +e.right

на выходе:

<header class="c-header">
            <div class="o-container"><a class="c-logo" title="На Главную"><img class="c-logo__picture" src="assets/img/logo-main.svg"/></a>
                <div class="o-container__right">
                </div>
            </div>
        </header>

возможно ли как-то получить, такое наследование?

<header class="c-header">
            <div class="o-container"><a class="c-logo" title="На Главную"><img class="c-logo__picture" src="assets/img/logo-main.svg"/></a>
                <div class="c-header__right">
                </div>
            </div>
        </header>

зы: разница в классах o-container__right и c-header__right

jt3k commented

не уверен, что это вообще легально )
Думаю так не далеко и до такого кода.

.a
  .b
    .a__lala
      .b__lolo
        .a__hoho

Когда возникает необходимость сделать такое я пишу так:

+b.page
   +b.box
      +e.link.page__link

на выходе будет такое

<div class="page">
  <div class="box">
    <div class="box__link page__link"></div>
  </div>
</div>

Наследования из глубины вложенных блоков к сожалению нет.

ну почему же не легально
элемент right лежит внутри блока header, просто ограничивается при это контейнером.
если я не прав и так нельзя по истинной методологии БЭМ - поправьте меня)

jt3k, спасибо за ваш пример и я бы им воспользовался, вот только часть right вообще никакого отношения к контейнеру не имеет и потому миксование тут не подойдет.

kizu commented

По БЭМ это легально, конечно, но вот придумывать какой-то новый синтаксис для такого в bemto не считаю особо целесообразным: чаще всего можно обойтись либо полным написанием, либо, как в этом примере, просто обычным jade:

+b.HEADER.c-header
  .o-container
    +b.A.c-logo(title='На Главную')
      +e.IMG.picture(src='assets/img/logo-main.svg')
    +e.right

или, соответственно,

+b.HEADER.c-header
  .o-container
    +b.A.c-logo(title='На Главную')
      +e.IMG.picture(src='assets/img/logo-main.svg')
    +e.right

Да, в этих случаях теряются либо возможности бемто на пропускаемом блоке, либо приходится повторяться во вложенном через прослойку элементе.

Если вдруг кто-то придумает хороший и лаконичный синтаксис как обозначать в бемто такие пропуски — было бы здорово. Можно будет для этого завести отдельную задачу, эту же закрываю :)