Changing CSS properties on a component with an existing class modifies that class instead of adding a new one

I was thinking that the behaviour could be something like this:

Default (current setup):

• If element has no classes, create unique class based on cid and apply styles
• If element has classes, apply styles to the union of those classes (or whatever classes are selected in the UI)

Toggled behaviour

• Test if element has an existing class based on the cid, if one does not exist, create one
• Always apply custom styles to the cid class only

Hi @thecodefish what do you think about this approach? https://codepen.io/artf/pen/jaaKvq

You will see there how to make selectors private (not stylable by the user) and the usage of the new avoidInlineStyle option which allows you to style components (not class selectors) without losing the responsivity and the use of states (eg. :hover)

I'd say you have 2 options:

1. Just deselect the class, in this case, the style manager scope will change to the component and not the rule
2. Add a new class to the component, instead of .menu-item rule you will get .menu-item.your-new-class