How to avoid specificity with modifiers

[FrancisVega]

Hi all!

I've an issue with triple modifiers and I can't resolve without combine classes selectors :S. I have this button block:

<!--Button Block-->
<button type="button" class="button button--main button--outlined button--disabled">Ok</button>

and css (I remove some properties to save space in the post)

.button--filled,
.button {
  color: white;
  background-color: blue;
  box-shadow:none;
}

.button--main {
  font-size: 26px;
}

.button--outlined {
  background-color: transparent;
  box-shadow:inset 0px 0px 0px 4px blue;
}

Now I need a button--disabled modifier to shade to gray the button appeareance, but really I need two button--disabled because I need to shade to gray the border if button--outlined is used or the background if button--filled is used.

Do I need outlined and filled buttons in two separate blocks?

Thanks you! :)

[tadatuta]

Hello, @FrancisVega!

That's just fine to combine classes for such cases. We do exactly the same. See styles in bem-components as an example (there's Stylus there).