example-modifier.scss

// Now let's talk about modifiers

// do!

.example {
  &__wrapper {
    &--wide {
      // code
    }
    
    &--narrow {
      // code
    }
  }
  
  &__hl {
    &--red {
      // code
    }
  }
}

// don't!

.example {
  &__wrapper {
    &--info {
      // code
    }
    
    &--firstElement {
      // code
    }
  }
  
  &__hl {
    &--productTitle {
      // code
    }
  }
}