As a web developer, I believe that having a consistent class naming strategy is essential in making a website scalable and maintainable.
Table of Contents
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.
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 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.
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
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.