vs. Client-First and other Frameworks
You may have this struggle:
“Wait, isn’t everyone using Client-First? Why even consider switching?”
Client-First is one of the most widely adopted frameworks in the Webflow community, and you might already be using it. But there’s always room for improvement, right?
This page breaks down the key differences and similarities between S2, Client-First, MAST, and the Saddle Framework — helping you decide if switching makes sense for you.
About these frameworks:
Our 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."
Mindsets & Structure
S2
S2 emphasizes a simple and easy-to-understand structure. There’s no need to over-prepare or create an overly complex layout. Avoid unnecessary nesting and excessive div wrapping.
When building S2 Framework, we strictly follow our rules when building with S2. However, we encourage you to take advantage of the flexibility of Webflow when building your site.
Client-First
It looks like Client-First does not usually call itself a framework but a guideline instead. Client-First suggests stricter adherence to rules to ensure consistency across projects.
CF often results in deeply nested structures, partly due to the CSS “folder” concept they invented and partly as an early preparation for “flexibility.”
MAST
MAST shares a similar mindset with S2 — leveraging the power and flexibility of Webflow.
The Saddle Framework
Not much was mentioned, but it should be close to MAST.
Learning Curve
S2
S2 is designed to be easy to start for anyone, and flexible for pros and developers. Our guidelines are brief and easy to understand.
By leveraging Webflow, we want anyone to be able to start using S2 effectively within a few hours of learning and hands-on exploration. For experienced users, you can dive deeper and use the framework fluently with custom code.
While S2 Attributes require some memorization, they are optional. Use only the ones you can easily remember and understand. Since the S2 Attributes library is small, you can become proficient quickly.
Client-First
Client-First generally requires more memorization, especially for utility classes, leading to frequent cross-referencing with the Style Guide. Combined with other guidelines, this results in a steeper learning curve based on our experience.
MAST & The Saddle Framework
Easy, but MAST seemingly has more utility classes.
Class Naming Convention
S2
S2 has a clear and simple class naming convention. We use cc- for combo classes and u- for utility classes. Additionally, we follow a straightforward strategy for when to use - and _.
Example: hero-banner_inner-wrapper
Use natural English for most cases.
Use - to separate words of the same context.
Use _ to separate words of different contexts or child elements.
See the Class Naming section.
S2 also includes a small set of abbreviations.
Client-First
Client-first uses is- for combo classes. While this is entirely fine, it can make filtering combo classes in searches a bit difficult, as is is common in many class names. For utility classes, Client-First does not use a prefix, which can become very confusing over time.
The use of - and _ in Client-First is somewhat ambiguous, and the "folder" concept relies on Finsweet’s Chrome extension for visualization.
Client-First also uses full words for everything, even for some frequently used terms, leading to longer class names. This result is also partly due to the folder concept, which adds extra design complexity and increases the burden on designers, making it harder to follow.
References: https://finsweet.com/client-first/docs/classes-strategy-1 https://finsweet.com/client-first/docs/classes-strategy-2
MAST & The Saddle Framework
S2 adopted the class naming strategies from them. So, we are the same.
Other Naming Conventions
For other naming conventions, such as variables, components, and interactions, all frameworks are generally similar. The differences are not a significant concern.
Use of Utility Classes
S2
S2 suggests using utility classes wisely and encourages you to style by creating your own custom classes and leveraging S2 Attributes.
S2 includes a set of well-designed utility classes. To guide styling decisions, S2 provides a simple hierarchy for making better styling choices:
Classes in Framework → Your Custom Classes → S2 Attributes (optional) → Utility Classes
Client-First
Client-First advocates the power of utility classes. However, this can lead to issues such as:
- Potential confusion due to missing a u- prefix to distinguish utility classes.
- Stacking utility classes incorrectly.
- Root utility classes being unintentionally styled or removed.
For example, you don't need a utility class position-absolute to apply the style position: absolute. We avoid creating utility classes that are too simple that you should style directly.
MAST & The Saddle Framework
No specific guidelines are provided. The Saddle Framework has a simpler set of utility classes.
Last updated