Пытаюсь верстать по BEM (приоритет именно на методологию).
Сделал адаптивное меню. Для блока menu создал модификаторы _mobile и _desktop. Не знаю правильно ли это, поэтому не хватает критики.
Ссылка на Plunker. Жаль песочница не поддерживает препроцессоры, было бы удобнее.
P.S.: на счет сетки, то мне удобнее использовать отдельные классы и миксовать их с конкретным блоком, чем использовать миксины.
Буду чрезмерно благодарен за помощь.
С точки зрения методологии все хорошо.
Если говорить про вкусовщину, то:
js-dropdown-menu
,js-hidden
). Если у нас есть блокdropdown-menu
, то у него помимо CSS может быть и JS. Не нужно их разделять. И если в какой-то момент блок меняет свое состояние таким образом, что становится невидимым, то это его собственный модификаторdropdown-menu_hidden
, а не отдельный микс с блокомjs-hidden
._mobile
и_desktop
— ок, если нет возможности не дублировать в DOM-дереве сущность под каждое окружение. Но если есть возможность избежать копипаста и просто менять стили для одного узла с помощью media queries — было бы лучше.Спасибо за ответ.
На счет замечаний:
Чтобы понять, какие свойства стоит сделать собственными, а какие — отдельными, нужно посмотреть на них с точки зрения реиспользования на другой странице/проекте. Очевидно, что в зависимости от дизайна
dropdown
будет позиционироваться в разных местах, так что это свойство не является собственным. А вот возможность его скрыть/показать нужна всегда, стало быть, это его собственный модификатор.Чтобы решить эту проблему, достаточно написать простейшую функцию-хелпер для установки модификатора. Вот хороший вариант из готового: http://xslc.org/jquery-bem/
В
bem-components
есть универсальные блокиbutton
,menu
иpopup
а потом на их основе легко собирается блокdropdown
. При этом вместоbutton
в качестве триггера может служит, например,link
или какой-то иной блок. Композиция рулит.Зависит от макета и требований к поведению. Однозначного ответа здесь быть не может.
@tadatuta многое встало на свои места. Спасибо за подробный ответ. jquery-bem is fantastic.