To date, we’ve always required that you add a class to an element before you style it. Although this workflow may make perfect sense to a developer used to writing CSS by hand, this name-first, style-second workflow can be unfamiliar and unintuitive to a lot of designers.
But our mission is to empower designers to create for the web. That’s why we’re taking steps to make Webflow feel and behave more like tools that designers are already used to. Automatic class naming is a simple, yet big step in that direction.
Here’s how automatic class naming works
Now, when you add an element to the canvas, all your styling options will be available immediately.
But this update won’t disrupt your existing workflow. Once you’ve placed an element on the canvas, you can take one of three actions:
- Create a class
- Select an existing class
- Start styling
So if you’re comfortable with your existing workflow, you can carry on as usual by either creating or selecting an existing class. Automatic class naming just opens up a third option that allows you to immediately style an element – without pondering what the perfect class name might be.
As soon as you start adding styles to the element, we’ll automatically create a unique class name based on the element type, so you may not even need to rename it. But you’re free to update our automatically generated name to whatever fits your workflow.
Speaking of updating class names: We’ve also made class renaming easier. You can now easily rename classes by clicking on the class dropdown that appears on hover, or double-clicking the class name.
Build complex interactions and animations without even looking at code.
So why make the change?
The benefits of this new style-first, name-second approach include:
A faster design workflow
With automatic class naming, you no longer need to come up with a unique and descriptive class name before you style an element. Building complex layouts becomes much quicker when you don’t need to pause and create a class every time you add something to your canvas.
Save class naming for later, when you have a better sense of site structure
Coming up with good class names is hard. It’s even harder when you’re not exactly sure of the structure or design of the thing you’re building. With generated classes, you’ll be able to style your elements freely and rename their classes later, when you have a better sense of your site’s overall structure.
Existing workflows are preserved
If you’re comfortable naming your classes before applying styles, you can keep working that way. Webflow will only generate a class if you haven’t already defined one, so you can design however you'd like.
We hope you enjoy the flexibility that automatic class naming opens up in the Designer. We believe it'll bring new ease and speed to designing with Webflow.
Let us know what you think in the comments below!
