The 2024 Guide to Webflow Website Naming Conventions

If you're building with Webflow for the first time, or you're taking over a project from someone else, you might run into a project with bad naming conventions.

The problem with this set up is that it's messy, difficult to work with, and means that if you want to make a change across a website, you have to go through and update each element individually.

This usually comes out of building as you go without reusing classes, which overtime will cost you hours of having to go through again to make website updates.

Instead, you should be building off of a consistent system that you can rely on and come back to. Let's look at a naming convention system that you can use to easily build and maintain a Webflow website so you don't run into these issues.

Note: The following system is a great set-up for designers, but if you come from a development background and want a more detailed system to work with, you can try BEM.

‍

Building a design system

First of all, you want to have a central page where you keep all of your classes that you use throughout the website.

If you don't have a style guide or design system page in your Webflow project, you'll want to create one now. This is where we are going to set up all the elements and styles we plan to use throughout the website.

By collecting all the classes we are going to use on a specific page, when we clean our project by removing unused styles, all of the system styles we still want to eventually use will stay within the project and not be deleted.

Any time you want to add a new style or section to your project, you can add it to the design system page too. This might seem like a waste of time, but when you find yourself in an unorganised project, you will realise why it's so helpful to have a design system.

Section and structure naming conventions

A page is built up on sections, ones that usually fill about 80% the size of your screen. To keep things consistent, every time you add a new section, you want to give it a "Section" class. I will usually give this class some top and bottom padding to give it space from content in other sections.

I also define the colour of the section with an additional class. If you add the colour class to the Container, it won't span the full width of the page on bigger screen sizes; therefore, you'll want to add it on top of the section class.

You can read more about how this structure works on my guide to structuring content in Webflow.

‍

Next you'll have a container in each section. This is to enable a limit on how wide a section can get on bigger screen sizes; usually around 1100 - 1300px. This is also where it's best to add the alignment of the section, which I add as a class on top.

Column naming conventions

Columns are a great way to be able to build hundreds of different unique layouts, all while keeping within the same simple system.

All you need to do is set up a "Column" class, then set up the different sizes for on desktop, tablet, and mobile. It's best to build on a 12 Column layout, as this is the structure that is currently most commonly used throughout the web, and most website designs are initially built on a 12 column layout.

This is much more flexible than using the built in Column element, as if you use the built in Columns, you'll find their limitations when you get stuck building a complex layout.

Grid naming conventions

Grids are another great way to structure content, and the built-in Webflow grids are easy to use. These layouts are great for card layouts, such as blog posts cards.

I use a very similar structure to columns, with first defining the element as "Grid", and then defining how many columns each grid section has for the different screen sizes.

By defining all grids with a main "Grid" class, you can adjust all grid sections at once if you ever need to change their margin, gap size, or even background colour.

I've created layouts for grids with 4, 3, and 2 columns, but have also defined special layouts with one side of the grid bigger than the other, such as 1-1.5 and 1-2. These can come in handy for feature or hero sections.

Text naming conventions

Though it might seem logical to only edit the baseline text classes (the classes in pink), when working on big projects you will come to see that this will only get you so far.

By creating a main "heading" and "paragraph" class and then adding the size as a separate class on top, you have a lot more wiggle room to use any size of text anywhere.

Let's say you have a quote half way down the page which you want to be the text size of an H1. If you use H1, you'll be confusing the page set up for SEO, as search providers will think this text is the main text of the page.

By using this set-up of classes, you can make the quote an H3 or P, and then manually change it to the size of H1 by adding the right class.

Button naming conventions

I prefer to build all button styles under "button" (no kidding), as this means you can style all buttons when needed simply by styling the primary button.

I set up a couple of different button options that can be used throughout the website. It's important not to set up too many different button styles, as this can confuse users as to what button actions are most important.

Other naming conventions

This post could go on and on with all the different use cases for different types of elements, but I don't want you to feel like this is too complex, as it's not.

Here's a quick round up of some other elements and styles you might use with them:

• Icons: Use a main "Icon" class, and then add on a class for the different use cases, such as "Small" or "Tab". This keeps the same kinds of icons the same size across a website.
• Cards: This is for divs such as blog posts, and again you can just use a main "Card" class and add on a class for the use case, such as "Resource".
• Images: Use a main "Image" class and then add on class for the use case, such as "Cover".

Do you see the common theme? If you're setting up a main class for each type of element and then adding on to that, it's easy to stay organised across the website.

A lot of the set up is common sense once you set up the starter elements. You should be comfortable adding on to your system as you go, when building new types of sections.

Summary

This is just one way of setting up and using a naming convention system for Webflow, but there is no one correct way of doing things. Whatever system you end up using, it'll be better than having no system.

Either way, you want a system that is built around how you work, so that creating and maintaining your website feels like a breeze. In the long run, a set up like this will save you hours and hours of maintenance work.

Build the right system, and get to work.