At our agency, we use Webflow as an implementation tool, and as such we follow implementation best practices. Having a pre-define Style System allows us to keep things organized, and scalable.
Using a pre-defined system allows anyone (not only developers) to scale a project and add more pages on top.
Our Style System is created based on BEM, but tailored to Webflow's environment nuances to allow easily coding on top of it.
We deeply care about quality and make sure that everything we do meets the highest engineering standards.
Our class nomenclature system is a variation from BEM (Block Element Modifier), a methodology that helps you to create reusable components and code sharing in front-end development.
When publishing, Webflow automatically transform all classes into lowercases, and all spaces into underscores. So it makes sense to already do it in the Designer and have the class names as they will be output. Tip: This is also great to work with custom code when you need to use that class.
The moment you begin styling an element, a class is automatically created and applied to the selected element. These classes are created using really bad practices, such as caps, spaces, and are not descriptive to be reusable.
What to do? You can recognize classes that are created automatically by names like Div Block 2, or Paragraph 2 . If you find a class that was created automatically, simply replace it by a proper Class Nomenclature
Webflow elements are basically HTML elements that you can drag and drop inside your Canvas, so when building using Webflow we need to keep in mind the HTML Markup best practices.
When creating a new section on your site we need to create the structure first. At its core, it should look something like this:
To keep naming as standards, we define these names for the most common elements:
With sections, you can use combo classes to add other styles. For example, when you need to change the hero image on internal pages: c-hero cc-about
Containers in our templates are predefined using the
class c-container.
We have some predefined containers based on our grid 12 columns grid:
At our agency, we have a couple of standardizations to make sure we are all doing things the same way, and anyone can jump in a project with the ability to understand what/how was done and why.
Define styles for each type element. Don’t use H1, H2, etc for style. The headings define the structure/markup, not the style. These are the default names we are using for fonts are:
Each text must have a wrapper c-text-wrap or
c-title-wrap. On top of these classes we can add Combo Classes to update specific styles :
Create a new class for the text or title if you need to update some of the followings styles:
We have defined 3 different button types. You can add a div wrapper with class c-button-wrap you can add Combo Classes to add variables (ie: changing position). If you have a button with a unique style, please create a new class.
It’s important that everything you build it’s working on smaller size screens, all the way down to mobile.
When updating a style to fix a responsive view, to make sure we are not breaking every other element with the same class, we use combo-classes (aka modifiers).
The nomenclature of the combo class should be:
cc-{breakpoint}_{type of fix}
For example, if we have a button that, because the text is too long (cof cof German language), you may want to adjust the font-size to be smaller. For this case, your button should have the following classes:
c-button-m cc-blue cc-portrait_font-size
