Why Chain System?
How many times have you asked to yourself:
How should I call this Class?
Where is this class?
Where is this class being used?
How many times have you duplicate classes?
How long does it take to make a Style guide?
How many mistakes you make while building your site because of your Class naming system?
Chain System, perfect for Webflow
Whether you are beginner or an advanced Webflow Developer, Chain System gives you a Class Naming approach with the aim of minimizing mistakes while you build your sites.
Try it nowChain Class Naming System helps anyone building sites in Webflow making it simple, easy, fast and reducing errors.
Main Principles
Just follow the chain:
pagee > section > container > elements > detail
Avoid the use of Combo Classes
Avoid as much as possible the use of Combo Classes. That is difficult to maintain.Instead, merge Combo Classes or redo.
Avoid the use of Combo Classes
Use spacing for containers
Spacing (Margins/Paddings) should be mainly in Containers, not in low level elements. Use layout structures such as Flex and Grid for placing elements.
Use spacing for containers
Avoid the Webflow Hadouken
Avoid excessive use of divs, boxes in boxes, avoid Hadouken or you will be KO
Avoid the Webflow Hadouken
Use middle dash and lowercase
We use middle dash between each word (home-header-h1)
Each Class tells you exactly where you are in the document flow
Use middle dash and lowercase
Use Capital letters for Components
We use Capital letters for Components (Navbar, Footer)
Use Capital letters for Components
Ready to tackle
team design?
Clone Chain SystemChain System for Webflow
Chain System perfect for Webflow
Whether you are beginner or an advanced Webflow Developer, Chain System gives you a Class Naming approach with the aim of minimizing mistakes while you build your sites.
Try it now