Replace combo and global classes with BEM Style Manager

The current Style Manager, and the way Webflow handles global and combo classes, can be a bit confusing and unintuitive.

I'd like to propose a new way for handling classes, which mirrors Block-Element-Modifier (BEM) conventions.

Here's how it works:

  • Each custom class is now entirely an abstraction. Classes only convey that they are a div or something else that's very basic.

  • Using / or __ in the name has the effect of creating a folder.

  • If you have two classes named "Block/{class}", or "Block__{class}" and "Block/{class}", then they'd both be under the same heading of 'Block'. (This is a bit like what happens in Sketch, or the Bear Notes App)

  • The modifiers to those classes determine the look and feel of their assigned parent classes.

  • All modifiers are global and interchangable.

  • More recent/specific modifiers override prior modifiers.

As for precedent: someone could already employ this strategy if they wanted to. I've used c-abc to denote abstract classes to divs, and then applied global classes/combo classes on top of them to govern how they look and function.

What I'm proposing would make combo/global classes more intuitive.

  • John Fallot
  • Aug 30 2021