Hi! I use the Bulma css framework from which I use the the button class. I want to use that class on my element but also modify it a bit. However, I get into the problem of class application order.

To overwrite some property I have to use the !important modifier as shown below:

<button::btn-save class="button">"Save"</button>

style btn-save {
  height: 1rem !important
}

It is because the order of application would be like this:

1. the custom btn-save class written in Mint code
2. the button class from the Bulma framework

To avoid the !important modifier I can alternatively create the style in a CSS file instead of in mint code and use it in the specified order:

1. Bulma's button class
2. the custom btn-save class written in CSS file

<button class="button btn-save">"Save"</button>

This is not ideal because:

1. the mint's file watcher doesn't refresh page when the CSS file gets edited
2. the class in CSS becomes global (or I would have to manage multiple CSS files myself)
3. the !important modifier breaks priorities of applying property values
4. in some cases we have to write !important almost everywhere because

Solution?

I would propose a solution like this:

<button::.button::btn-save>"Save"</button>

style btn-save {
  height: 1rem
}

This way we could set specific order how classes are applied. The class names prefixed with the dot (like .button) would not be verified the same way as the usual Mint styles.