I've been experimenting with BEM for a week now, and there's one aspect that I find confusing.
BEM discourages the use of global modifiers ()
But then how do I go about implementing this?
Global SCSS (shared classes)
@each $green in $primary-greens {
.primary-green-#{index($primary-greens, $green)} {
color: $green;
}
}
component.html
<mat-icon svgIcon=check-circle class="primary-green-4"></mat-icon>
In the context of BEM, how can I achieve this? Should I duplicate the code for each green icon?
component.html
<mat-icon svgIcon=check-circle class="icon--green"></mat-icon>
component.scss
.icon--green {
color: list.nth($primary-greens, 3);
}