I wanted to ask about how CSS styles cascade in Webflow, as my experience so far has shown that it behaves a little differently to normal CSS stylesheets.
I’m trying to set up a system of classes so that i have a default class, and then a secondary class applied as a modifier. For example:
.default-element (base class)
.element-green (adds background-color green)
I’m aware that this can be achieved with combo classes, however, my question is in relation to reusing that “modifier” class.
Say I started 1 step back, and built my modifier class first (not as a combo, but a solitary class called .element-green). This allows me to style that individual class with the properties i want, so that when i ADD it to another class (hence creating a combo), it already carries some styling. This too seems to work.
And then it gets interesting.
So far, in the Style Manager, I would have 2 classes:
If i added a new object, and gave it a class .new-element, it would now appear as a third class in my Style Manger like below:
If I NOW apply the modifier class to the .new-element class, the style DOESN’T apply because in the CSS style sheet, the modifier is in the wrong order! I would have to create an entirely unique combo class for the new element in order to achieve the same result, rendering the idea of global modifiers useless.
The solutions i can think of include a way for styles to be re-ordered in the Style Manager so that they cascade correctly, or for there to be some way for an !important value to be added to specific classes for use in a global modifier scenario.
Please let me know if i’ve missed something or if there’s another way to achieve what i’m trying to do.