Streaming live at 10am (PST)

Help with style sheet ordering, cascading styles, and class modifiers

Hi team,

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:
.default-element
.element-green

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:

.default-element
.element-green
.new-element

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.

Thanks!

Hi Dan. Indeed. I tried to explain it here:

Thanks Vincent!

You’ve articulated it much better than i did, but nice to know i was thinking along the right lines and not going crazy. From your experience, what have been the best work arounds to manage this? I’m currently thinking i might need to include the most important global styles in the custom code with !important values, though it pains me to do so! Any other suggestions?

Cheers

I’m mostly using Webflow’s system of combo classes. It could be more optimized, that’s true, but there are ways to work with it.

Here’s a trick I found:

2 Likes

This is great, thanks for sharing. I always wondered why this type of relationship was only available on rich text elements but it looks like it runs a bit deeper than I thought. Definitely going to try this out on some upcoming projects.

1 Like

I wonder what the challenges are for them not to unleash it for all elements. It definitely works and I haven’t hit a wall using this technique a lot.

2 Likes