So in my scss framework I define sizes gradually with a sass map with keys from xs to xxxl. So I can do things like creating button modifier classes from xs padding to xxxl padding in an each loop. In the case of a button it is pretty straight forward I have a button block class with a background color some padding and so forth. In the loop I create modifier classes looking like .button--xxl { padding: 2em; }. That makes sense - I have a base block class with all its stylings and I have a modifier class modifying a very specific aspect of the block class.

But now comes my "problem" - I have an .island block class which looks like this: .island { padding: 1.5em; } the modifier classes look like .island--xxl { padding: 2em; }. So the modifier class completely overrides the block class. In the case of the island class it may be a possibility to use a utility class instead - something like .u-padding-xxl { padding: 2em; }? But I have a second example:

.grid--spaced-horizontal {
  margin-left: -1.5em;
  > .grid__item {
    padding-left: 1.5em;
  }
}

.grid--spaced-horizontal--xl {
  margin-left: -2em;
  > .grid__item {
    padding-left: 2em;
  }
}

Again, it bothers me that the modifier class completely overrides the block class. I don't want to have <div class="grid grid--spaced-horizontal grid--spaced-horizontal--xl"></div> in my code when grid--spaced-horizontal is completely pointless.

What do you guys think about my problem? Am I completely on the wrong track?