Class Naming (Webflow & Figma)

As we’ll be starting this project from Figma to Webflow, maintaining good class naming in Figma and also later on in Webflow is the key to make your project scalable and usable by other developers or clients.

We look at Webflow as a Visual Builder tool, so understanding the basics of HTML and CSS will be the key to make your project a success, and it will save you hours and hours of stress long term.

We’ve taken many trails and errors while developing the sites and tried many different approaches to development we’ve seen in the Community. Our Flow Class Naming is basically us taking small bits and pieces from many other places and putting it together into our workflow.

There are a lot of unique class naming systems online including:

• Finsweet - Client-First
• Made With Knockout - Class Naming
• Webflow - Class naming 101: BEM

So what class naming system you use is going to hugely depend on your personal preference. As we’re covering our agency process in this Guide series, we’ll be using the Flow Class naming system, and all processes in this Guide will be following that process.

If you wan’t to use other class naming systems, you can still follow the guide by leveraging other class naming systems easily.

Why not BEM ?

We do not think Webflow is a Design tool. We feel it is made for Developers or Designers who are interested in learning Visual Development.

So a natural flow would be to accommodate using BEM for class naming. This is a good way to name classes in CSS, but it didn’t work for us.

Why? Well I would say it is not using the Webflow’s potential to the fullest:

It has a large learning curve, so not everyone will understand it. If our clients or someone who is still not a Webflow Development Expert has to access the site they wouldn’t have any ideas on how to go ahead and update elements on it, without messing up the whole site.

Creating classes in Webflow is fast and easy to manage, so there’s no reason not to create a custom class when needed.

We feel it is much faster to type class names like Your Custom Class instead of using your-custom-class directly in Webflow and speed up the workflow of development even more.