Добрый день.
Осваиваю БЭМ совсем недавно, появился вопрос, ответ на который не удалось найти в доках.
Допустим, имеется простенькая разметка (https://jsfiddle.net/ao3xLbue/) элемента формы .form-el с модификатором label в значении hidden. При этом элемент label скрывается. Теперь эту конструкцию поместили в блок .form, где поведение для .form-el_label_hidden должно быть переопределено. Пусть элемент label при этом становится зелёным, а не скрывается. В голову приходит только каскад .form .form-el_label_hidden .form-el__label { ... }. Как обойтись без него? Может быть какой то хитрый микс придумать, который "залазит" внутрь блока .form-el? В примерах обычно миксуется всё на уровне блока, а не его внутренностей.
Спасибо.
Такой каскад норм:
.form-el_label_hidden .form-el__label
, ничего страшного, что он есть. Прокидывать вглубь модификатор нужно только если в этом есть необходимость, например, если блок имеет несколько элементов __label и каждый из них может быть скрыт независимо от других.Другой вопрос, что модификатор выглядит как булевый:
.form-el_labelless .form-el__label
Собственно ответ на этот вопрос в доках есть: https://ru.bem.info/methodology/faq/#Почему-нежелательно-использовать-вложенные-селекторы Третий абзац как раз описывает данный случай.