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.

Screen Shot 202...

×

Attachments Open full size