New workflow: Automatic class naming

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 you style an element, we'll create a class automatically. — Now you can start styling an element and we'll create a class for you — or you can keep working as you always have.

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.

Hover over a class name to reveal a dropdown where you can rename it.

Design interactions and animations without code

Build complex interactions and animations without even looking at code.

Start animating

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!

Nathan Romero

Product Designer @webflow.