Методика очень нравится, когда-то давно познакомился очень поверхностно и хватало просто базового нейминга, но сейчас столкнулся с такой ситуацией:
У меня есть независимый(как мне казалось) блок .container, который выполняет свою функцию - ограничивает контент по ширине и добавляет padding . Я в него заворачиваю нужные мне блоки. И всё бы хорошо, пока я не решил сделать меню, которое может быть как sticky, так и мобильным.
Грубо говоря элементы так выглядят:
nav.mobile-sticky-menu
.container.container--full-width
ul.mobile-sticky-menu__list
ul.mobile-sticky-menu__list-item
ul.mobile-sticky-menu__list-item
ul.mobile-sticky-menu__list-item
При разных условиях(ширина окна, позиция скролла) добавляются разные модификаторы - --mobile, --sticky, и соот-но меню либо прилеплено к верху при скролле, либо через кнопку открывается справа/слева - мобильное.
Условия.
В состоянии sticky - мне нужен мой контейнер, ограничивать по ширине меню и добавлять паддинг
В состоянии mobile - мне не нужен мой контейнер, лишние паддинги.
.
.
Я понимаю, что я скорее всего где-то сильно косячу и полнейший нуб в БЭМ, но помогите понять как в таком случае правильно связать логически блок .container и блок .mobile_sticky-menu, чтобы сохранились условия выше.
Получается блоки же друг на друга не должны влиять - теряется модульность
Но и писать два меню разными блоками тоже не эффективно - дважды генерировать на сервере пункты меню, а если их много, например Из-за того, что у меня один блок меняет своё предназначение)) выходит такая ситуация. Отказаться от .container для --sticky меню я не могу, но и использовать .container для --mobile тоже не подходит.
4 раза перечитал — ничего не понял: какие паддинги, какое меню? Для начала советую разобраться с неймингом.
Попробую разъяснить. Есть блок .container, его функциональное предназначение ограничивать по ширине(max-width) и добавлять паддинги(padding), этот блок может иметь модификаторы - различный max-width в зависимости от места его применения на сайте.
Тут вроде ничего сложного. Попробую объяснить про меню простыми словами. Это обычное горизонтальное меню, которое "прилепляется" к верху страницы, когда пользователь скроллит вниз(разумеется вы такое не раз на сайтах встречали). Еще меню может быть мобильным, когда появляется иконка открытия меню(бургер обычно) и при нажатии выезжает сбоку/сверху/снизу менюшка. У меня оба этих меню в верстке одни и теже html-элементы, чтобы не дублировать код. Меню в зависимости от ширины экрана(мобильная и меньше или десктоп и больше) получает разные модификаторы &--sticky/&-mobile и соот-но применяются стили меню для разного вида меню.
Понятней стало или я безнадёжен :( ?
Если стало, то я не понимал как совместить блок .container с блоком меню(. Я уже нашёл ответ на свой вопрос в документации здесь - HTML-вложенность элементов
Вроде с неймингом я знаком, что плохо в моём примере ? Есть блок .mobile_sticky-menu, в нём 2 элемента list и list-item, единственное, что может быть неправильно это использование второго блока .container внутри, но вроде же так можно делать
PS. Простите за плохое описание :(
Без дизайна могу лишь посоветовать использовать @media-query + каскад от блока.
— Во-первых смешение разделителей для модификаторов:
_или--? Во-вторых — именование элементов этоблок+элемент, а неблок+модификатор блока+элемент— возможно, поэтому и не получается правильно декомпозировать стили, т. к. намешано всего в кучу.Вообще, решать такие вопросы без дизайна — это как учить рисовать по телефону.
Ну и, конечно, достаточно распространённая ошибка — «внешняя геометрия» у блока
.container: ширина, позиционирование у меню…