BEM Global modifier for color

Question

I've been using BEM for a week, and there is a thing I don't get.

BEM says global modifiers are not recommended (http://getbem.com/faq/#can-i-create-global-modifier)

But then how should I do 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 BEM how to do this ? I should do this ? But then it means duplicate the same code everywhere 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);
}

Answer 1

In the BEM methodology this is not a global modifier but a block. You can use your class primary-green-4.