Since you mentioned the anvil.js approach, but didn’t mention the multiple roles approach,
I just wanted to mention that from the ide you can assign only one role per component, but from code you can assign also a list of roles (a list of strings).
I often create roles that change only a few properties and assign them from code. For example but.role = ['withshadow', 'small'] rather than but.role = 'withshadow-small'.
This allows to reduce the wild proliferation of roles, but it can’t be used at design time.
It would be nice to be able to select multiple role names from the drop down in the properties section.