I’m very confused by how to use styles efficiently. Webflow err’s on the side of constantly creating new styles every time you generate a new element, which is super annoying. Here’s an example of what I mean
Create new text style
Want to use a right aligned version of the text
Have to create a new combo class sub style
Want to use a different color
Have to create another new combo class sub style
My original class now has multiple branching permutations of a style that show up in a list.
Why not just let me not apply a style at all? Or override a quality? I don’t want to create dozens upon dozens of combo classes. The method of just adding a new class to a list isn’t clear. Figma’s variants method is like, 100% clearer.
Is there any way I can utilize styles in Webflow in the same way they work in Figma? Where you can override a style’s attributes as opposed to needing to constantly generate new styles and combo classes?
Every single new Div block I create runs into this same issue:
Create a div style
Want to make a minor change ONLY TO MY NEW DIV.
Can’t
Have to create a new combo class to right align an element instead of left align in
Rinse and repeat until my style is combo classed into confusing oblivion.
It’s such a mess. Please help. I’m coming to Webflow from Figma where all of this stuff works way simpler.
If you’re coming from Figma there will be a huge learning curve. But, once you learn how to use styles in Webflow, it is very easy.
Yes, you have to create styles for every little change but it comes handy when you need to change something in the future.
To make it easy for you to manage all the style classes, learn and use Client-First. It is a set of rules that’ll help you manage your classes and project in an easier way.
Daksh covered most of what you need to know, but a few added points.
Until you learn classes, subclasses, global classes and how they work with breakpoints, you won’t understand Webflow. Watch the Webflow-U vids and get a firm grasp on these concepts first.
Everything is based on standard HTML + CSS design so the more you understand those underlying principles the more Webflow’s approach will make sense.
As this grows, you’ll need a system for naming conventions and your class styling approach. There are a number of these frameworks, Client First is one of the better known.
In general your approach will be;
Add a DIV or other element
Give it a class that already exists if that’s relevant. For example, a button might be given a class of big-button.
If this is a new thing, with new styling rules, you’ll generally create a new class, and then apply your styling fules.
Do all your work at desktop breakpoint first, then modify your classes on smaller and larger breakpoints.
What’s the right way to think about components alongside styles? They seem like they do the same thing but in different ways. It seems like if you wanted to you could just use styles for everything and avoid components altogether.
Client first is developed by an well known Webflow agency named Finsweet. It’s not made by Webflow corp.
Classes are about the reusability and central management of styling. In Webflow these are foundational to all design, without them you effectively cannot use the designer.
Components are about the reusability and central management of structure, with styling. They make it easier to reuse pieces of work like navigation, footers, CTAs, Heros, Contact forms on multiple pages of your project, but still manage them centrally so that changing the master updates all of them.
If you scale up further, as an Agency with multiple clients, components can even be shared and reused across projects. For example I’ll build a background video player that autoplays muted, but has an unmute button that can restart the video with sound on. That component is designed to work across multiple projects., but the code and design are managed in a central “component library”.