Is it OK to use multiple modifiers for a class in BEM?

Question

Is it ok to add multiple modifiers to an element in BEM like this:

my-item__icon--open--not-red

As you can see I added --open and --not-red to my-item__icon. Is this ok? Is there a better way to achieve the same?

Answer 1

It is ok to have multiple modifiers on a single element, but it should only be one modifier per selector. Don't forget that modifiers can only be added as a new selectors to an existing element selector: <div class="my-item__icon my-item__icon--open my-item__icon--not-red">. Source/example: https://en.bem.info/methodology/naming-convention/#element-modifier-name

Then you probably want to style them one by one:

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