Combo classes : how to use more than one modifer?

Design help General
1

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
  • button big
  • button big primary
  • button 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 button primary.

====== original post below ===========

Below I describe the different things I tried and the different things I learnt along the way :

  1. 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.

  1. I learnt that this is not the case because what you see in the designer as text big is actually .button and .button.big in 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).

  2. 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 button big where big is a combo class and another with button big where big is a global class. Yes, Webflow does not prevent that for some reason.

  3. 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 big class it applies changes on all element with the big class… 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

see Please introduce global classes

Also if using global class everywhere one does not know with which precedence the classes will be applied.

  1. 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.

source : Class naming 101: BEM | Webflow Blog

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--primary and c-nav__button--big to achieve what I want. Because of the naming those classes cannot be confused with other --primary and --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.

2

In general if you want to create base button + 3 modifiers:
button and create 3 colors red blue purple

You should:

  1. Create button class (add padding, font-size, deafult background color)

  2. Add div - Create separate red class (not combo) - add only
    background: red.
    Same idea for blue and purple.

  3. Go to button and add red

  4. If you want to change .button.red in DRY way - you must change the padding/font-size/bg) (From step 1) on element with button class only (Otherwise you create combo class).

Test - now if you change the “.red” to orange the bg of all buttons will change to orange.

Sometimes i really need this idea so i copy-paste “button.red”" remove “red” edit the base class and delete the duplicate button.

SUM: For now “no way” to change only the first class of combo classes (To select only the base class).

Anyway your Q is little long (Hard to answer all you asking).

2 Likes
3

Thank you Simon, yes sorry for the long post, I will edit the title and original post to highlight the main thing I was trying to do : adding more than one class modifier.

I had once used the procedure you describe (using global class as modifier) however it felt really a bit hacky : I kept all the divs with one global class assigned to each in one hidden div at the top of the page, so I could edit the classes from there.

Plus it does actually not really solve the problem when you want to add more than one modifier (ex button red primary where the 2 modifiers are red and primary) because the behavior is not consistent, sometimes the styling of the first modifier red would not be overridden by the second one primary and sometimes it would.

I later learnt that

‍We do not recommend using global classes as combo classes as there can be inheritance issues that can break your design across your project.

source : Renaming Global Classes do not change name for same named Combo Classes

So for now I have no solution, and I restrict myself to never go deeper than one combo class, it leads to more code repeat but there does not seem to be another way.

4

I’m facing the same problem. It should be possible to easily add global classes like @dri describes.
Anything on this @webflow?

1 Like