Расположение BEM модуля в разметке HTML

Здравствуйте,

Спасибо, использую в проектах БЭМ. Использую не весь стек, а именования.

Возник вопрос про расположение именно в дереве.

Вот код

<div class="burger-menu__container">
            <div class="burger-menu" id="burger-toggle">
                <div class="burger-menu__bar burger-menu__bar--top"></div>
                <div class="burger-menu__bar burger-menu__bar--bottom"></div>
            </div>
  </div>

Вопрос, может ли самый главный блок модуля (burger-menu) находится по иерархии внутри своего элемента ? Мне это не очень нравится. По семантике и по виду в общем.

Контейнер, тоже вроде это элемент модуля, но по иерархии находится выше.

Как правильно поступить в этом случае ?

 <div class="burger-menu-container">
            <div class="burger-menu" id="burger-toggle">
                <div class="burger-menu__bar burger-menu__bar--top"></div>
                <div class="burger-menu__bar burger-menu__bar--bottom"></div>
            </div>
  </div>

Сделать как отдельным модулем ?

Подскажите пожалуйста как правильно сделать ?

Спасибо

7 years ago

tadatuta

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

Попробую пофантазировать, если не угадаю — буду рад уточнениям.

Судя по разметке можно предположить два варианта:

Контейнер для данного меню нужен всегда. Тогда решение очень простое — именно этот узел и должен называться burger-menu, а вложенный в него узел можно переименовать, например, в burger-menu__inner.
Если же контейнер к меню напрямую отношения не имеет и служит лишь для того, чтобы как-то спозиционировать меню на странице, то и в названии никакого burger-menu быть не должно. В этом случае следует положить (или смиксовать) burger-menu с элементом родительского блока, относительно которого требуется спозиционировать меню. Либо, как вариант, можно завести отдельный блок про раскладку/сетку и использовать элементы такого служебного блока.

Подробнее см. https://ru.bem.info/methodology/css/#Внешняя-геометрия-и-позиционирование

7 years ago

CROSP

Спасибо Вам большое за ответ.

Действительно все очень просто. Использовал первый вариант + второй. На счет миксовки, тоже круто, для себя недавно открыл, вообще сейчас аж приятно смотреть стало на HTML структуру.

Вот что в итоге получилось, что Вы на счет такого решения думаете ?

   <div class="l-navigation-bar">
        <div class="navigation-bar__toggle burger-menu" id="js-burger-toggle">
            <div class="burger-menu__container">
                <div class="burger-menu__bar burger-menu__bar--top"></div>
                <div class="burger-menu__bar burger-menu__bar--bottom"></div>
            </div>
        </div>
  </div>

Спасибо

P.S. Имя l-navigation-bar потому что использую по кусочку из каждой методологии, в данном случае l- из SMACSS

7 years ago

tadatuta

Я так понимаю, что у navigation-bar__toggle тоже тогда должен быть префикс l-?

В целом структура нормальная, если отказаться от использования id ;)

7 years ago

CROSP

Спасибо за ответ. на счет l- для navigation-bar__toggle там у меня своя специфика, я использую l- классы для разметки (медиазапросы, display,position) обычно в связке с обычным) Я постараюсь как-то изложить свою идею в будущем в посте)

На счет id, по другому никак, точнее можно выкрутится с помощью добавления специфичности при поиске js-ом, но я думаю с приставкой js- сразу понятно что нужен для обработки JS-ом) Хотя можно было таким же образом дать уникальный класс с таким же именем, но как по мне так понятнее, да и в общем у нас кнопка для меню на странице одна только ( Singleton), поэтому и использую айдишник. Только в таких случаях id и использую (когда достучаться надо из скриптов)

Спасибо Вам еще раз.

7 years ago

kompolom

@CROSP Как показывает практика, то, что сегодня одно, через месяц может оказаться и не одно. Дизайнеры, они веселые ребята... Так что пишите js так чтобы ему не нужны были id. Даже если не используете i-bem.js

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