Combo classes : how to use more than one modifer?

[dri]

Thank you Simon, yes sorry for the long post, I will edit the title and original post to highlight the main thing I was trying to do : adding more than one class modifier.

@Siton_Systems

You should:

1. Create button class (add padding, font-size, deafult background color)
2. Add div - Create separate red class (not combo) - add only
   background: red .
   Same idea for blue and purple .
3. Go to button and add red
4. If you want to change .button.red in DRY way - you must change the padding/font-size/bg) (From step 1) on element with button class only (Otherwise you create combo class).

I had once used the procedure you describe (using global class as modifier) however it felt really a bit hacky : I kept all the divs with one global class assigned to each in one hidden div at the top of the page, so I could edit the classes from there.

Plus it does actually not really solve the problem when you want to add more than one modifier (ex button red primary where the 2 modifiers are red and primary) because the behavior is not consistent, sometimes the styling of the first modifier red would not be overridden by the second one primary and sometimes it would.

I later learnt that

‍We do not recommend using global classes as combo classes as there can be inheritance issues that can break your design across your project.

source : Renaming Global Classes do not change name for same named Combo Classes

So for now I have no solution, and I restrict myself to never go deeper than one combo class, it leads to more code repeat but there does not seem to be another way.