Можно ли использовать несколько модификаторов для класса в БЭМ?

Question

Можно ли добавить несколько модификаторов к элементу в БЭМ, как это:

my-item__icon--open--not-red

Как вы можете видеть, я добавил - открыть и - не- красный до my-item__icon . Это нормально? Есть ли лучший способ добиться того же?

Answer 1

Можно иметь несколько модификаторов на одном элементе, но это должен быть только один модификатор на селектор. Не забывайте, что модификаторы могут быть добавлены только как новые селекторы к существующему селектору элементов: <div class="my-item__icon my-item__icon--open my-item__icon--not-red">. Источник / пример: https://en.bem.info/methodology/naming-convention/#element -modifier-name

Тогда вы, вероятно, захотите оформить их один за другим:

.my-item__icon {display: none;}
.my-item__icon--open {display: inline;}
.my-item__icon--not-red {color: blue;}