This will help to easier apply and update global and combo-classes throughout all break-points. Currently, If I want to update the style of an element with its own class plus 3 global classes in a breakpoint different from the base one, I need to do one of the following:

• Delete all 3 global classes for the element in that specific breakpoint, apply new styles and reapply the 3 global classes. (Most of the time I don't do this approach as I always forget the global classes that were applied in the beginning).

• Duplicate that element, remove the 3 global classes from the duplicated element, give styles to my class in that breakpoint and finally remove the duplicated element.

There are a lot of Webflow users that rely on global classes for every project, specially those trying a utility-first approach. This feature will benefit on three ways:

• A more maintainable, less-confusing, class structure.

• Smoother workflow when making our designs responsive.

• First-time and beginners users will understand the concept behind global and combo-classes earlier.

There should be two CSS-selector boxes in the Designer UI, one for "normal" and combo-clasess, and one for global classes. "Normal" and combo classes can't go in the global class box and viceversa.

A global class need to be created first as a normal class and there should be an option to make it global. Once a "normal" class turns global, it will change from the normal-css-selector box to the global-selector box.

There should be a background color change (or any other visual clue) in the styles panel when switching from styling "normal" and combo classes to styling global classes, so it makes more clear what type of classes is the user updating.

Attached is a simple example of the selector boxes UI.

Global classes.png

×

Attachments Open full size