Как подружить БЭМ, БЭМ модификаторы, SCSS и каскадность?

Question

[Vladimir Vasiliev]

Очень часто нужно поменять состояние внешнего блока.
Например когда мы фокусим элемент, дизейблим, делаем доступным только для чтения и т.д.
Если применять методологию БЭМ - нужно ввести модификатор. А значит основному элементу мы добавляем модификатор. Но вот незадача, у нас несколько вложенных элементов. И все они должны поменять стили, а не только родительский элемент.

Вот подскажите, пожалуйста, как согласовать эти модификаторы БЭМ с каскадностью (с вложенными элементами) и SCSS. Дублировать имя родителя - не самое лучшее решение.

<div class="my-select my-select_disabled">
    <div class="my-select__header">...</div>
    <div class="my-select__list">...</div>
</div>

.my-select {
    &__header {
        //...
    }

    &__list {
        //...
    }

    &_disabled {
        // Когда отключен весь селект
        // поменять цвет для my-select__header
        // поменять цвет для my-select__list
    }
}

Comments

[Ankhena]

с каскадностью (с вложенными элементами)

Каскад это не вложенность.

[Vladimir Vasiliev]

Ankhena, спасибо за ответ. Не случайно даны два варианта. Люди могут дать ценные советы по тому или иному понятию. Есть идеи по теме вопроса, а не по формулировке?

[Ankhena]

Vladimir Vasiliev,

Есть идеи по теме вопроса, а не по формулировке?

Зачем повторять, если Сергей уже и так все давно написал?

Answer 1

[Сергей delphinpro]

Проблема в записи на scss, правильно?

Есть два варианта:

.my-select {
    &__header { }
    &__list { }

    &_disabled { }
    &_disabled &__header { }
    &_disabled &__list { }
}

.my-select {
    $this: &;
    &__header { }
    &__list { }

    &_disabled {
        #{$this}__header { }
        #{$this}__list { }
    }
}

Comments

[Vladimir Vasiliev]

Сергей delphinpro Спасибо большое, очень похоже на решение в план записи.
А можете уточнить, в плане самого подхода в стиле БЭМ, является ли это нормальной практикой?

Потому что кейс банальный (вешать на глобальный контейнер класс с состоянием контейнера, а детей уже менять в зависимости от этого класса состояния), который в классическом css + scss/sass/less/stylus решается легко и привычно, но вот с БЭМом + удобными средствами SCSS требует немного другого подхода.

[Сергей delphinpro]

Vladimir Vasiliev, Это нормальный подход. Но в контексте БЭМ стоит учитывать, что вложенность используется только для модификаторов. И модификатор блока может менять стили только у блока и у элементов только этого блока.
Нельзя писать селектор .block1_mod .block2 {}. Но это уже чисто БЭМовская идеология, к scss отношения не имеет.у