Как организовать БЭМ с адаптивностью?

Question

[Дмитрий Кравченко]

Доброго всем дня!
На сайте в футере располагается меню, которое должно быть в строку на больших экранах и в столбец на мелких.
Что я делаю:

.menu{}
.menu-item{}
.menu-item-h{/*стили для горизонтальных элементов*/}
.menu-item-v{/*стили для вертикальных элементов*/}

Каким образом я могу указать, что на экране менее 768px я хочу видеть вертикальное меню, иначе - горизонтальное?
Эти же стили используются в других местах.

Мои мысли на этот счет:

.menu-item-h_min_sm{/*стили с нужным медиазапросом*/}

При этом получается дублирование кода.

Спасибо всем заранее за ответы.

Answer 1

[Дмитрий Сергеевич]

Какой-то у вас не правильный БЭМ

Comments

[Дмитрий Кравченко]

Что имеется ввиду? Именование классов? menu-item-h может стать menu-item_h, но тогда я не смогу добавить туда еще и "_min_sm" модификатор

[dpismenny]

Дмитрий Кравченко: у вас недоБЭМ какой-то получается :-) правильный БЭМ это .block__element_modificator или .block__element--modificator. В вашем случае нужно делать так: .block__element.block__element_modificator

[Дмитрий Кравченко]

Денис Письменный: я понимаю, .menu-item у меня - отдельный блок, но это по большому счету неважно, вопрос в другом: как указать на адаптивность? Нормальным ли решением станет модификатор "_footer"? Для меня выглядит костылем. Может быть, для этого уже есть решение?

[dpismenny]

Дмитрий Кравченко: Если у вас только некоторые пункты меню требуют такого класса, тогда добавляете только им. Если все, тогда добавляете модификатор сразу родителю: .menu.menu_footer. Но в этом случае лучше добавлять более абстрактное название, типа: .menu.menu_narrow

[Дмитрий Кравченко]

Денис Письменный: насколько я знаю, БЭМ учит, что каскад - это плохо, и призывает избавляться от него, а тут я вынужден буду определять вид элементов по родителю. Нормально ли это?

[dpismenny]

Дмитрий Кравченко: Вопрос здравого смысла. Если у вашего независимого блока есть другой вид отображения, то есть две опции: либо добавить модификатор только блоку, либо каждому его элементу. Но если мы говорим о том, что модификация происходит только с одним элементом – тогда, естественно, модификатор только для этого элемента.