From Client-First
Switching from Client-First to the S2 Framework
Last updated
Switching from Client-First to the S2 Framework
Last updated
Client-First is one of the most widely adopted frameworks in the Webflow community, and you might already be using it. So, you may have this struggle:
“Wait, isn’t everyone using Client-First? Why even consider switching?”
This is our own experience —
"We tried to embrace Client-First in our past projects. However, we observed that not only did our clients find it quite difficult to follow, but our designers also struggled to keep up with all the rules."
In Client-First, is- is used as a prefix for combo-class names, while utility classes has no prefix and they are not easily distinguishable.
In S2, we also use is- for combo-classes and u- for utility classes.
In Client-First, you may need to consider the "class folder" concept when naming classes. Some may also follow the long BEM naming method, resulting in overly lengthy names.
In S2, we want to keep it simple:
Use natural English in most cases.
Use - to separate words of the same context.
Use _ to separate words of different contexts or child elements.
Refer to the section for more examples.
S2 also includes a few abbreviations to streamline naming.
S2 has no class folder concept.
Important mindset when using S2: keep things neat and avoid overly nested structure.
In S2, we focus on a flat, clean class structure where elements are named based on their actual function or purpose.
About utility classes, we suggest to use wisely. They can be difficult to track.
Do not stack or sandwich utility classes.
Do not modify a modifying utility class directly. Instead, create another combo class to modify the steak. For example, modifying u-text-center in container u-text-center is not recommended.
If you do not have an exact match for a utility class in mind, create and name your own class instead.
Finsweet offers a lot of excellent free and premium resources, and you may need to use some of them in your projects.
In the world of Webflow, there is no real incompatibility. S2 is designed to work seamlessly alongside resources base on other frameworks, utilities, and add-ons.