Property inheritance or modifier or mixes

[ksurakka]

I'm adapting BEM to create more maintainable CSS and I like it a lot. Some cases are still bit fuzzy. Sorry about long post, but these things are so closely related.

I have an icon and I'm using it in a text and in a button, like:

<div class="text">
    Text and icon should be black <i class="icon"></i>
</div>

<button class="button">
    Text and icon should be white <i class="icon"></i>
</button>

In the text block the icon should be black and in the button it should be white. In both cases the required color is same as the container's text color.

First question, should icon inherit color OR should I add modifiers like "icon--in-text" and "icon--in-button" OR should I use mixes?

icon {
    color: inherit;
}

/* OR */

icon.icon--in-button {
    color: white;
}
icon.icon--in-text {
    color: black;
}

/* OR */

button__icon {
    color: white;
}

Then I may come up with a need to add disabled-state to the button. Text color of disabled button and the icon should be gray.

If I choose to use the "icon--in-button" modifier, then I need to add a "icon--disabled" modifier too, I guess?

<button class="button button--disabled">
    Text and icon should be gray <i class="icon icon--in-button icon--disabled"></i>
</button>

icon.icon--disabled {
    color: gray;
}

In this simple case inheriting seems valid option, but things get more complicated when we have an icon stack, e.g. background and foreground icons, which means two colors. The color of the background icon should be same than the text color of the container and the color of the foreground icon should be same than the background color of the container.

<button class="button">
    <!-- green background, white text -->
    <div class="icon-stack">
        <i class="icon-stack__background"><!-- white icon --></i>
        <i class="icon-stack__foreground"><!-- green icon --></i>
    </div>
</button>

<button class="button button--disabled">
    <!-- silver background, gray text -->
    <div class="icon-stack">
        <i class="icon-stack__background"><!-- gray icon --></i>
        <i class="icon-stack__foreground"><!-- silver icon --></i>
    </div>
</button>

How would you handle icon stack situation?

[iamdey]

I think you should declare block and element first:

.button {
  &__icon {
    color: white;
  }
  &--disabled__icon {
    color: gray;
  }
}
.text {
  &__icon {
    color: black;
  }
}

icon might be a Block but should not have modifiers representing its parent