Trying to grasp the best method for writing BEM modifier rules within parent classes. I've utilized SASS's @extend but question if this is the right approach. For example:
If there is a class called .form structured like this:
<div className="form--inverse">
.form
background-color: $white
color: $black
...
&__label
...
&__input
...
and you wish to include a modifier named .color-inversed with properties such as:
&--color-inveresed
@extend .form // my dilemma arises here.
background-color: $black
color: $white
nesting it under the .form class:
.form
&__label
&__input
&--color-inversed
...
Is it correct to @extend .form inside --color-inversed? It seems off due to potential redundancy in the final CSS output, yet without extending, div class='form--color-inversed would not inherit any .form styles.