Announcements
|
Mar 14, 2017

New workflow: Automatic class naming

Starting today, you no longer have to assign classes to elements before you style them — because we’ll do it for you.
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:

  1. Create a class
  2. Select an existing class
  3. 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.

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!

Get our top web design content in your inbox
Just like over 500,000 other designers.

Thanks! Check your inbox to confirm your subscription.

Oops! Something went wrong while submitting the form

We hate spam just as much as you do.
Nathan Romero

Product Designer @webflowapp

What's Webflow?

It’s a web design tool, CMS, and hosting platform in one.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form

Related Articles
Announcements
Apr 5, 2017
How we’re making Webflow Hosting even more reliable
Find out what we learned from February 28th's Amazon Web Services outage — and how we're improving Webflow Hosting to prevent future outages.
Entrepreneurship
Apr 3, 2017
How to power your freelance web design business with Webflow – for free
Find out how to get your web design business up and running with Webflow. Without paying a cent.
Announcements
Mar 27, 2017
Redesign your website for the May 1 Reboot with Webflow
Redesign your portfolio website in time for the May 1 Reboot with Webflow — without writing code — and get 3 months of hosting free!
Get our top web design content in your inbox
Just like over 500,000 other designers.

Thanks! Check your inbox to confirm your subscription.

Oops! Something went wrong while submitting the form

We hate spam just as much as you do.