ChainSystem the most intuitive and easy Class Naming System for Webflow.
Work fast, be clear, be concise, be productive.
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 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:
Chain System
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.
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 (Margins/Paddings) should be mainly in Containers, not in low level elements. Use layout structures such as Flex and Grid for placing elements.
Page Issues
Minimize "Issues to improve the page" as much as possible before publishing.
Webflow Hadouken
Avoid excessive use of divs, boxes in boxes, avoid Hadouken or you will be KO
Chain nomenclature
Avoid the use of Webflow native elements as Columns and Containers. They are hard to maintain. Use better divs.
Magic Numbers
Avoid using magic numbers for width and height values.
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 on Images
All images must have an alternative text.
CSS Units
We recommend using .rem as CSS unit.
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.
Chain Workflow
Here some Webflow building approachs, you could use a combination of them.p
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.
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
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.
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.