When creating a website, I can create multiple classes like this:
.white{
color: white;
}
.button{
padding: 10px
}
Then I can add both of those classes to an object, like a div or something. With webflow, from my understanding, anytime I add a combo class to an object, it pulls in the styles from the classes above, but then any future changes are then styled in a new class:
.white.button{
**/future changes/**
}
Is there any way, I can choose NOT to create a combo class, or decide what styles I want to add to which of the 3 classes above? I hate the idea of the complexity of having to deal with removing a combo class, making changes, and then adding the combo class back. And then going back and forth a bunch of times.
How can I easily make changes to JUST the .white class, or Just the .button class WHILE it’s applied to an element(assuming that element has other classes applied to it).
You can always go back to edit the initial or previous combo class by clicking the button to the right of the class name field. This doesn’t give you as much flexibility as editing each class independently, however it will definitely keep you from deleting new combo classes just to edit the initial class.
Yes, but what if I want to select only the later classes? When I click the drop-down, my most common use case scenario is to select any single class to edit at a time. I don’t always want to go back to just the previous class or classes in a combo class group.
If I have the class .white.button, then I can go back and edit the .white class individually, but I have to do the annoying back and forth, remove and re-add, process to edit the .button class.
From my understanding of what you are saying, there is no way to do this. correct?
Hi Jodesigner
I’m struggling with this also. As far as I know, webflow works exclusively with combo classes. So an extra class to an element only (!) works in combination with the parent class (correct me if I’m wrong).
This is not an ideal situation.
For me, coming form a background to code every class by hand, this is not not how I like to work. I like(d) to create seperate classes for padding and margins and apply that to elements whenever they need it. A lot like how bootstrap works.
Ok, I can declare classes (like .mt-40 standing for a margin-top: 40px;) in the head section of a page or even global-wide (my preferred way), but you don’t see that reflected in the Designer which makes designing a specific part/page of the website not as visual as you like.
I would really like to see an option to add a class to an element that has no direct relation (read: no combo class) to an already assigned class.
I want to add that class to every element I like to see fit, not depending of an already existing class.
Would this be possible in a future update of Webflow?
Would be great to get off the training wheels and leverage combinators and core CSS functionality. IMHO I don’t see it happening which is sad for power users.
Curious if there’s more news around this.
Finishing up on my second Webflow project and curious why this isn’t possible and why more people aren’t asking for this. Found this cool video of Nikolai Bain to quickly animate elements by setting up a few classes that hold different variations of scroll animations, which makes it super easy to animate a page quickly, but the downside is this class is on top of these elements now, which makes formatting more cumbersome. It’s so weird there isn’t a box in Webflow where styles can be added without stacking them…
The solution is to go to the selected element’s Settings tab, and add the classes as a custom attribute. This will work only if you have created the classes in isolation elsewhere - for example a Style Guide / Design System page.
One downside of it is that you cannot see the changed properties afterwards in the Style bar.
Looking forward to reducing some 44,000 lines of CSS and getting rid of this clutter in the browser inspector:
