ChainSystem the most intuitive and easy Class Naming System for Webflow.

Work fast, be clear, be concise, be productive.

SnakeSystem

Chain Class Naming

- We use lower case for Class naming
- We use Capital letters for Components (Navbar, Footer)
- We use middle dash between each word (home-header-h1)
- Each Class tells you exactly where you are in the document flow
- Each page is a skin, then you just have to follow the chain

Just follow the snake:
page > section > container > elements > detail

Chain System
SnakeSystem Structure

Chain Class Naming

Core structure for Chain System is:
page-section-container-element-detail

This means:
All elements from a page will begin with the name of the page, this is what we call skins. Let´s say we have four different pages, these will be the skins:

  • home
  • landing
  • blog
  • faq


Then it is followed by the section name:
For Home:

  • home-header
  • home-hightlights
  • home-guidance
  • home-features
  • home-process

For Landing Page:

  • landing-header
  • landing-info
  • landing-blog

For Blog:

  • blog-hero
  • blog-posts

For FAQ page:

  • faq-header
  • faq-questions


Then there will come the containers.
For Home page:

  • home-header-container
  • home-hightlights-container
  • home-guidance-container
  • home-features-container
  • home-process-container

For Landing Page:

  • landing-header-container
  • landing-info-container
  • landing-blog-container

For Blog:

  • blog-hero-container
  • blog-posts-container

For FAQ page:

  • faq-header-container
  • faq-questions-container


Next step: You could have more containers (block, wrapper, grid) or the final elements.
Let´s take a look!


If you go to the Navigator, with a quick view you can understand easily the project structure.
Clone the project or see these screenshots:

Home Class name structureLanding Page Class name structureBlog Class name structureFAQ Class name structure

Chain System

MAIN PRINCIPLES

What is Chain System?

Chain System is a Class Naming system. You can use is as it is clear and concise. It uses KISS Methodology, wherever is possible, avoid complexity.
Chain System uses the same Class naming structure for all pages.

All kind of sites

One of the main principles is to minimize errors: Avoid the number of issues when repeating classes. We use mainly one class for each element.

Class Name Location

With the Class Name of an element, you know exactly where you are in the page and you can fix any issue fast.
You avoid the number of issues when repeating classes.

RECOMMENDATIONS
Combo Classes

Combo Classes

Avoid as much as possible the use of Combo Classes. That is difficult to maintain.
Instead, merge Combo Classes or redo.

Spacing

Spacing

Spacing (Margins/Paddings) should be mainly in Containers, not in low level elements. Use layout structures such as Flex and Grid for placing elements.

Issues to improve page

Page Issues

Minimize "Issues to improve the page" as much as possible before publishing.

Webflow Hadouken

Webflow Hadouken

Avoid excessive use of divs, boxes in boxes, avoid Hadouken or you will be KO

Container and Columns

Chain nomenclature

Avoid the use of Webflow native elements as Columns and Containers. They are hard to maintain. Use better divs.

Magic Numbers

Magic Numbers

Avoid using magic numbers for width and height values.

HTML Embed

Custom Code

Avoid Custom Code Blocks. Everything you can do in Webflow Native, go for it. Even if you know coding, you should relearn the visual way and know how to use interactions.
 If you need some generic CSS for every page of your project make a component for General CSS

Alt Text

Alt Text on Images

All images must have an alternative text.

rem units

CSS Units

We recommend using .rem as CSS unit.

Naiming fail

Nomenclature

SnakeSystem follows nomenclature strictly, it is not for lazy people.
"Div Block 37", "Heading 21", "Text Block 34" or "Image 8" are not accepted.

workflow

Chain Workflow

Here some Webflow building approachs, you could use a combination of them.p

Scaffolding approach
Scaffolding approach

Here you work with a temporary structure on the building.
This means for example when you are building a section, you build it without naming Classes, and once ready, you go back and name all the elements correctly. Similar to refactoring in Code.

Clone approach
Clone approach

You create first a structure that you will use mostly in all your pages (skins).
Then you do a page, from that one you go on creating the others.
You do Class naming on the go.

Icon: Clone Trooper by Wes Breazell from TheNounProject

Atomic approach
Atomic approach

The main idea is that your design can be broken down into smaller, reusable components that can be combined in various ways to create a complete pages.
You will do first all components: Navbar, Footer, Features, etc. and then move to pages.

Style Guide approach
Style Guide approach

Here you spend some time making a Style guide, and then you build the site.
If you are an advanced Webflow user you could combine it with Chain System but the possibility of making mistakes is bigger.