Change combo class order?

Design help General
1

Hello,
I am reading about BEM: Class naming 101: BEM | Webflow Blog

And, while experimenting, I noticed that there are discrepancies in style organization.
For example, if I had a section and that specific section has its own “.section” selector, and two new combo classes called “.section–size-full” and “.section–color-light” it appears that before I can use “.section–color-light” I have to use “.section–size-full” and I cannot do the reverse. What if I want to add the color first and then adjust the size later?

Basically, my style manager looks like this after I add the combo classes:

.section
|.section–size-full
|.section–color-dark
|.section–color-light
|.section–color-dark
|.section–size-full
|.section–color-light
|__.section–size-full

Instead, I want:

.section (parent)
|.section–size-full (child)
|.section–color-dark (child)
|.section–color-light (child)

And be able to use any of them in any order I want without having to create combo classes and re-adjust the properties.

Basically, if I have two sections, I want to be able to assign the classes no matter which order they’re assigned. So, the selector might look like this:

section1: .section .section–color-light
section2: .section .section–size-full .section–color-dark

What am I doing wrong?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

You cannot reorder combo classes, however global classes do not have ordering constraints.

In general, use combo classes where combo classes make sense. Everywhere else, define your styles as global classes. It’s up to you to decide what that means for your design style, and for your specific project.

Even with compound classes you can change ancestor parts of the combo class by clicking the adjacent selector. However this doesn’t always work on non-default breakpoints, in which case you need to temporarily remove the child classes, make your breakpoint-specific changes, and then re-add them.

Global classes are created by defining the class as the first new class on an element. Once that’s created, you can append it to any other class set, and it will apply without creating a combo class.

Yes it’s confusing. No the designer really doesn’t help you identify the difference. No, BEM doesn’t either.

If that creates chaos for you, that’s what a naming convention is for.

Let’s say you have .section__size-full, but in some places you need the top padding reduced, so you add a combo class .is--tight-top. That makes sense because those margin changes might only apply to that section.

Another compound - .section__size-medium .is--tight-top would be different and have different margins, so again a combo makes sense.

But let’s suppose you have a featured background color that you want to be able to apply to either. You can make that a global class .is--featured however that’s indistinguishable from your combo class naming. So if you want, deviate for your globals naming convention. .g-is--featured.

When you see those, you know they can be applied anywhere, and in any order. .g-hidden--mobile, .g-hidden--desktop, .g-text--red, whatever.

It’s messy to be sure, but Webflow went this route in the class design to try to bring as much power as possible to designers, without requiring them to fully understand or manage how classes work.

There really isn’t a perfect approach, or there would only be one standard. Try them out, but ultimately create what works for your agency.