7

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?

user1941537
  • 6,097
  • 14
  • 52
  • 99
  • 3
    This is subjective since BEM is mainly a form of style guide. I don't see a problem with multiple modifiers personally. – aviya.developer Jan 27 '20 at 11:43
  • 2
    BEM It's not a law carved on the stone, but personally I would decouple that modifier into `my-item__icon--open` and `my-item__icon--not-red` and I would apply both. Just a matter of taste and context. – Fabrizio Calderan Jan 27 '20 at 11:45
  • Aren't modifiers supposed to be applied to blocks like `my-item--open`. not to elements as in the question. – Batu.Khan Jan 27 '20 at 11:48
  • @Batu.Khan, In my example two modifiers are added to the same block. – user1941537 Jan 27 '20 at 11:49

1 Answers1

6

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;}
Paul Kozlovitch
  • 786
  • 7
  • 12
  • If the multiple classes for each modifier bothers you, I built a Sass library that will allow OP to use their initial single class: https://github.com/One-Nexus/Cell/wiki – ESR Jan 27 '20 at 21:51