I am trying to wrap my head around the correct approach of writing BEM modifier rules inside parent classes. I have been using SASS's @extend but feel like doing it this way is wrong. Here is what I mean:
Say I have a .form class which looks like this:
<div className="form--inverse">
.form
background-color: $white
color: $black
...
&__label
...
&__input
...
I then want to add a modifier called .color-inversed which would look like this:
&--color-inveresed
@extend .form // this is my question. Read on.
background-color: $black
color: $white
and nest it inside the .form class:
.form
&__label
&__input
&--color-inversed
...
should I really be @extending .form inside --color-inversed? It feels wrong to do so as the the final CSS will be bloated with repeating rules for all the elements extended via their modifiers.
Yet, if I don't extend it, div class='form--color-inversed will completely ignore all the .form rules.
Don't use adding modifier to element with @extend, since in BEM modifiers are not standalone classes. You use the modifier in conjunction with it's modified class:
<div class="form form--color-inversed"></div>
Modifier is an extra class name which you add to a block/element DOM node. Add modifier classes only to blocks/elements they modify, and keep the original class