New Check out the curated list of the finest design resources I've gathered for you! Take a look →

My Webflow Class Naming Strategy

In this article, I want to talk in more detail about my Webflow class naming strategy that I implement in my starter for Webflow websites.

As a web developer, I believe that having a consistent class naming strategy is essential in making a website scalable and maintainable.

My webflow class naming strategy on my starter webflow
My webflow class naming strategy on my starter webflow

The Importance of Class Naming Strategy in Web Development

A well-defined class naming convention can make it easier to navigate a website’s codebase and understand how different elements relate to each other. It can also make it simpler to make changes to a website’s design or structure without accidentally affecting other parts of the site.

In addition, a consistent class naming strategy can help improve website performance. By reducing the size of the CSS stylesheet, a website can load faster, which can lead to a better user experience.

Webflow Class Naming Strategy for Page Structure

When it comes to page structure, I like to use a naming convention that is based on the BEM (Block Element Modifier) methodology. BEM is a popular naming convention that helps developers create more maintainable and modular CSS.

|-- body
	|-- .global-styles
	|-- .page
		|-- .header-nav
		|-- .page__inner
		|-- .footer

I also use a consistent naming convention for my global styles, which I embed as a custom CSS component in Webflow. This allows me to add custom styling to my website and to use properties that are not available in Webflow.

 I embed as a custom CSS component in Webflow
I embed it as a custom CSS component in Webflow

Setting Up Body Copy and Text Helper

To set up the body copy and text helper, I simply set the class at the body level for all pages. This makes it easier to apply consistent styling to the body copy and to create helper classes for text elements.

Setting Up Body Copy and Text Helper
Setting Up Body Copy and Text Helper

Setting Up Headings

For custom fonts, I always install them as custom fonts in the page settings. In this step, I reset all headings fonts and create custom class names for variations in heading font size.

|-- .heading-h1
|-- .heading-h2
|-- .heading-h3
|-- .heading-h4
|-- .heading-h5
|-- .heading-h6

Setting Up Utility Classes

Since I have created a starter template for my Webflow website development, I adjust the utility classes depending on the project that I am working on. This includes adjusting spacing utility classes, containers, buttons, background colors, and text colors.

Creating Components

When creating components, I like to use the BEM methodology and combine utility classes with specific component classes. This allows me to create more modular components and to make it easier to modify and reuse code.

|-- .testimonials
	|-- .v-space-32.testimonials__top_space
	|-- .testimonials__wrapper
		|-- .text-size-32.testimonials__content
		|-- .text-size-18.testimonials__title
	|-- .v-space-32.testimonials__bottom_space

Optimizing the Webflow Site After Building

Once I have finished building the website and adding web interactions and responsive design, I focus on optimizing the site’s performance.

Removing Unused CSS

To reduce the size of the CSS stylesheet, I remove any CSS classes that are not used. Before doing this, I always make a backup of the stylesheet in case I need to revert any changes.

Reordering CSS Styles

Using an extension by Finsweet, I reorder the CSS styles to make the stylesheet more organized and easier to read.

Removing and Reordering Web Interactions

Similar to optimizing the CSS, I remove and reorder web interactions to optimize the JavaScript code.

Making it Dynamic

In this final phase, I create a CMS collection and implement basic SEO optimization for each page. Sometimes, I export the site as a static version and make it dynamic using WordPress as the CMS.

I hope this tutorial has helped you learn more about Webflow website development and my class naming strategy. By following a consistent naming convention and optimizing the site’s performance, you can create more maintainable and scalable websites.

Rizwan Aritonang

An independent WordPress & Front-End Developer from Bandung, Indonesia.

Get In Touch

Leave a Comment