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

Design help General
1

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!

2

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

3

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

4

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
5

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
6

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