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 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.
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.
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.
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.
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 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.
Circling back to this post for the upcoming 9-month anniversary. Lately, I have been following the Tailwind CSS development. If Webflow fixes the global class / combo class limitation I think a Tailwind CSS integration would kick ass. (Yes, I would like to integrate Tailwind CSS with Webflow) For those not familiar with Tailwind CSS, it’s a powerful and simple to use utility first CSS framework. Use it together with PurgeCSS to remove unused utility classes in the final product.
That being said, (I’m looking at you Webflow) please fix the global class / combo class situation.
@webhode is it still the case? i’m here also, had a thought that tailwind with it’s low-level utility clases could work pretty good with webflow, otherwise makes no sense… it feels so cumbersome without getting to pull any css libraries… literally can make front-end faster by typing, than with this webflow thing…
Actually even despite the limitations I still use utility classes as much as possible. I just have to have a special page with all possible u-classes collected to avoid deleting unintentionally, haha
I’ve asked this for years, not months. Years. I can’t even remember how far back I posted the need to address this. Nothing from Webflow.
WF is a great tool. It’s an intuitive way to design visually. But I’ve found it also makes me feel icky…like I’m sacrificing clean and logical structure (my way) in order to fit the WF way with its workarounds. It starts to feel bloated. And sometimes I feel like it’s masking too much behind a UI when giving me quicker access to things like a stylish sheet I can quickly browse—and God forbid, edit—would help orient myself on where my styles stand.
I don’t know why you ever bother in using a limited software like this, when nowadays you can build, in a pretty quick way, a totally better and performant website (with any framework you like - react, vue, ecc), while Webflow, the only thing that do, is make us developer waste time. I’ll never understand.
There’s definitely a lot of room for improvements in WF when it comes to classes!
I’m a Designer, and WF’s no-code promise (yes, that is a debate on its own) is what attracted me in the first place. So I guess I expect WF to be ideal for a creative-first approach (like in other design programs), meaning I’d like to be able to roughly laying out things first, and that way slowly developing a system, and then refining things. But WF classes issues are one of a bunch of things that make feel like I’m getting punished to approach it that way.
Cleaning up classes seems a real pain: inherited parent classes that you can’t seem to easily get rid of; no WF-native way of merging combo-classes (that at least is possible, in a limited way, with a FnSweet add-on); no efficient, practical way to create style guides and systems on the fly…
But as mentioned above, maybe I’m not approaching this the right way, or maybe there are easy ways to overcome these issues?
I’d really appreciate to hear how other people deal with class issues in WF. Thank you!
I don’t consider Webflow a “no-code” platform, but rather a “visual coding” platform. The difference is that in a true no-code platform, the user is free to drag and drop things around the page and they conform to some pre-defined styling & functionality to maintain sanity.
Webflow on the other hand, takes the actual underlying concepts/fundementals of the code that makes a webpage (HTML/CSS/JS) and lets you create the code in a visual manner. The result is a huge increase in productivity and perhaps a better way for beginners to “get” the box model and what’s going on in the code.
However, the trade-off is that to fully utilize Webflow you need to first learn the basics & building blocks of HTML & CSS, and then start creating (in my opinion).
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.
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.