Frequently asked questions

I realized that when you are building with Snake System at Webflow, you name elements from head to tail, so it reminded me of Rubik Snake game, where you cand fold it and everything is customizable.
According to Ernő Rubik: "The snake is not a problem to be solved; it offers infinite possibilities of combination. It is a tool to test out ideas of shape in space. Speaking theoretically, the number of the snake's combinations is limited. But speaking practically, that number is limitless, and a lifetime is not sufficient to realize all of its possibilities."
Also I had the idea of this video game called Snake where you grow bigger and have fun while solving obstacles. I like the idea of having fun while building something.
Although snakes don´t have good press, there are lots of nice myths about snakes, many of them related to creation. That I like :)

You can do it with or without Style Guide. Chain System is an opened system so feel comfortable about it.
- On the one hand having a Style Guide will give you consistency, better UX and nice patterns.
- On the other hand, Chain System has the premise that there is only one class and one class only for each element. Why? To avoid mistakes. You can think initially that all page headings will have the same font-size and line-height, but what if headings are different? You will begin to ask yourself where do you use that heading? Which pages? There is where you become crazy and make mistakes.
‍
That does not happen with Chain System: You have one Class for each heading, so if Design changes, you know exactly where to change that heading without affecting other headings in your building.
I have found that many Design files don´t have a Style Guide, so it is the Webflow Developer who makes it and it takes a lot of time. Does is worth? The answer is yours, my experience is that I don´t do them anymore. For that you need to follow SEO structures

Hyphen delimited strings is a common practice.
Every Class name you use in Webflow will be converted automatically to lower case and middle dashes which is what you will use with Code. So there is no reason to change that. Whether you are a beginner or advanced user in Webflow you will end up using Code. So, no need to think about the naming of your classes as Chain System has the proper name. This avoids mistakes.
‍
Some bad examples for Chain System:
"Home Header Container" -> This would be more a Designer approach. White spaces are converted to middle dashes. It will be converted to "home-header-container"
"homeHeaderContainer" -> This is camel case, we use this for Javascript not in Chain System Classes
"home_header_container" -> No sense, it will be converted to "home-header-container"
"home__header--container" -> This is as they do in BEM, I don´t see many people using BEM with Webflow, you will go crazy when using Code and they use a lot of Combo Classes.

Anyone who sees "home-header-container" understands easily and fast the structure of your page and where is that Class located. There is no need to change nothing if you have to use Code (that you will). It is also readable, clear, concise. And when you see all your Classes in the navigator you will see all clear in a quick view. It is not necessary to curl the loop, remember that we use the KISS methodology
‍

Yes you can! If you have Webflow experience surely, you should use them. If not, I would first get familiar with the Snake workflow. Check Utility page

No need to specify if your container is Flex or Grid, it can be a container, wrapper, block, etc.

I´m sorry! Are you from the past? ;D

Main structure is:
page-section-container-element-detail

You could reach 5 or 6 levels as much, if you have more, probably you can go simpler.
Remember:
We don´t use divs for padding, margin or text styles, you give your styles directly to your Class. Avoid the Webflow Hadouuuuuuuuken!

You could abbreviate sure, I prefer going semantic, but there are people using Snake System other ways.
This is the best way:
home-header
home-highlights
home-guidance
...

These you could use also, but they are not so clear:
h-header
h-highlights
h-guidance
...

home-sec1
home-sec2
home-sec3
...

h-sec1
h-sec2
h-sec3
...
‍

Be easy, these are good examples:

Modal | Open
Modal | Close

FAQ | Open
FAQ | Close

Testimonial | Slide into view
Testimonial | Slide out of view

Language | Dropdown opens
Language | Dropdown closes

Because they are very difficult to maintain.
Merge a Combo Class properties into a new class is on the Webflow Wishlist, by now you can use Finsweet Google Chrome Extension, at Candies you will find "Merge Combo Classes".

I recommend using rem, you could work in pixels and transform all to .rem using Finsweet Chrome Extension. If you are an advanced developer you can move to viewport, percentages and em units

Use SVG for all vector images such as logos, webp for images. Use Native Webflow compressor to webp. You could use also image compressors such as tinypng or compressor.io No image should be over 250Kb.

Webflow Hadouken is the excessive use of containers, so you have enough space there to draw Street Fighter 2 Hadouken. Try to avoid the excessive use of divs so you will make less mistakes.

You can hardly customize them, even less if you use Grid.

Therse ar for example numbers you use to give your divs an absolute value for width/height. You should use better percentages or Max Width as much.

This is my manifest:
- Everything I can do it Webflow Native I do that (unless it takes too much time)
- Then I move to CSS
- Lastly to Javascript
This applies specially for Interactions.

I would say you can learn Chain System in 10 minutes. Just clone this project and start practising.

We had a discussion in Twitter and some Webflow friend from Argentina told me he saw "Div Block 731"

You use Snake System the same as the other pages.
A good habit is to use the name of the dynamic fields. For example: blog-post-item-category-txt
‍

You can use Chain System for every project: Portfolio, ecommerce, branding, etc. I work for a Webflow Enterprise company and have used it there, in sites with more than 50 static pages and hundreds of dynamic pages with strict and straight QA process. I can only say that the number of mistakes is reduced drastically and also fixing them is much more faster.

Snakes are green (most of them) and we like green color.
‍Check it out! ;D