Streaming live at 10am (PST)

Fix global classes so we can create and maintain design systems / style guides

Disclaimer: I’m writing this as a UX designer with limited knowledge of CSS.

Add your vote for this change request in Webflow Wishlist.

Coming from the design space (Sketch and Figma) I’m used to thinking design implementation in terms of style guides. That means approaching design modular with reusable parts. I would typically define spacing sizes, background colors, border colors, border widths, drop shadows, etc. I use these styles and symbols in different combinations to create components and templates (the atomic design principles).

Moving to Webflow I would expect the possibility to transfer the same logic and use global classes that represent my styles/atoms and use the global classes in different combinations to create the design I want. But Webflow seems to be against this type of organization. I read in the forum that you don’t “believe” in combining global classes. You think that it’s dangerous to have one class affect multiple elements in the design :exploding_head: You instead implemented the concept of combo classes. Combo classes, I can tell you, is not a good way to work for people that are used to work in Sketch/Figma with styles/atoms. This is absolutely not good design system practice.

I hope that you decide to support combining global classes for us design system people. It’s a must-have. I don’t want you to remove the combo class pattern, just extend and improve it. I should be able to decide when to use a combo class or a shared global class. I know I can hack it today, which is a terrible pattern, and that is what I want you to fix – make right.

5 Likes

Why don’t you make multiple global classes and apply them to the same element? As far as I know you can do this without any issues.

That’s the ugly hack I am referring to. You can do it, but it’s not designed to work that way. Currently, you need to create a clean DIV, add the style, create a class and delete the DIV. If you want to add these “global clean classes” to an element Webflow will present this as combo classes without any autocomplete support when writing it.

Webflow does this:
DIV -> A -> B -> C -> D
Class D is the one visible on the DIV. If you want to edit class C you have to create a clean DIV, add class C, edit style, update class C and delete the DIV.

What we need is this:
DIV -> A
DIV -> B
DIV -> C
DIV -> D
All classes will be visible on the DIV and editable.

Each style must be separated and easy to maintain. Let’s say that my style guide is updated. I want to change the global style “space 2” from a margin amount of 1REM to 1,5REM. I want this change added to all elements styled with the clean global style “space 2”. It should be as simple as editing class “space 2” for this to work.

2 Likes

i’ve been wanting this for awhile as well. in fact, i made a post about a utility first approach with webflow last week.

i’ve played around with trying to implement it many times over the year and eventually abandoned it each time because it just wasn’t practical for how webflow assigns classes. really would love to be able to use this approach though.

also, thanks…i didn’t realize there was a wishlist item for it…just added my three votes.

2 Likes

I’m trying a utility-first approach. As an example, I have a page with 4 divs, with each having a single purpose/style.

I add a button and add classes to that button in any order. The button then inherits all the styles from the global divs. If I make edits to a global-class-div, and the button will inherit that change.

However, webflow says:

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

But, it’s not recommended to create more than one combo class since it gets hard to manage the inheritance of multiple levels of combo classes.

^ I don’t know why.

I could be wrong here but I think it’s just the way cascading CSS works. They are warning you so when you see something being adjusted and don’t know why then something like this could be the reason. I know that is obvious but when we don’t actually see the code and just a GUI then it is very hard to tell sometimes.
By using global that means it affects everything. Are you using templates or symbols?

You might be wrong :grin: Writing CSS with code, it’s possible to define classes you can reuse. E.g. you could define a class .blue that will add a blue color. That class can be added to elements in your code no matter how deep your structure is.

If you want to define a style guide with a set of reusable classes (typography, spacing, colors, shadows, border radius, etc), that is really painful with the current combo class pattern.

@java_I_tess I want to use global classes for margin or font size. I haven’t started using Utility-First approach just yet, but trying it out so far. I use symbols for larger components like nav-bars, haven’t used any templates so far.

@webhode Any idea why webflow would recommend against Utility-First approach ?

I have no clue. As long as you keep track of your utility (global) classes it’s a lot easier to manage than combo classes. The combo classes might work fine using BEM, but for design systems it’s a no-go.

1 Like