Hello everyone, this is my first post, I started to use Webflow few weeks ago and I love it… except for how classes work. I would like to know the proper way to use combo classes because I don’t see how to do this simple thing : apply multiple modifiers to base classes without repeating myself.
Imagine you have a class
button which has 10px padding, 14px font and blue background. Then you can modify it with a combo class
big with 20px font size and 15px padding. But somewhere else on the page you also want another variant
primary which has a bigger font-weight.
button big primary
If using combo classes I have to define
primary styles 2 times because of how classes are created by Webflow. If I change
button big primary it will not reflect on
====== original post below ===========
Below I describe the different things I tried and the different things I learnt along the way :
- Coming from CSS background I thought combo classes in the Designer style editor were regular classes but applied in the order they are written, from left to right.
ex I would have 2 elements, one with classes
button big and another element with
link big classes. I expected changes on the
big “class” to apply on both elements.
I learnt that this is not the case because what you see in the designer as
text bigis actually
.button.bigin CSS. Yes I did watch the tutorial about combo classes but I just thought it was normal classes applied from left to right (with some kind of hidden magic).
I then learnt that you can use normal classes in Webflow, called “global” classes. It is not in the tutorial but it is in the docs.
Those “global” classes are visually similar to combo classes in the Designer. As a result one could have to 2 elements with same classes sequences but it would actually generate different CSS for them : ex one element with
bigis a combo class and another with
bigis a global class. Yes, Webflow does not prevent that for some reason.
So I thought let’s use global class everywhere, so I am not confusing all those classes with same names. And so when I modify the
bigclass it applies changes on all element with the
bigclass… but using global classes is cumbersome, need to :
- create a dummy element and create a class on it
- go to the other element you want to apply this global class
- start typing this class (but not entirely because it disappear !), select this class in the “global” section of the classes list
- go back to the first element to delete it
Also if using global class everywhere one does not know with which precedence the classes will be applied.
- So I thought I was doing it wrong, and I started to use BEM notation, because I read that
In Webflow, combo classes should be taken advantage of for modifiers.
But I don’t really see how and why, neither when. To me it is still confusing and painful to use combo classes, because sometimes you need more than 1 modifier.
Ex : an element has
c-nav__button c-nav__button--big c-nav__button--primary classes and another has
c-nav__button c-nav__button--primary. If these are regular combo classes then the changes you make in the style editor to the
class c-nav__button--primary will only affect one element.
In this case I use global classes
c-nav__button--big to achieve what I want. Because of the naming those classes cannot be confused with other
--big classes on other elements.
But it does not make any sense to me because it defeats the whole purpose of combo classes used as modifiers. What am I doing wrong ?
Also it would be great to use different colors in the style editor for global classes, like purple.