1. Origine
Client-First est développé par Finsweet, un studio et éditeur d'outils américain qui occupe une place à part dans l'écosystème Webflow. Finsweet ne se contente pas de faire des sites, il construit des outils que toute la communauté utilise.
Attributes, leur bibliothèque d'interactions no-code pour Webflow, est devenue un standard sur des milliers de projets. CMS Bridge permet de synchroniser des CMS externes avec Webflow. Extension by Finsweet est une extension navigateur qui améliore directement l'expérience dans l'éditeur. Et en 2023, Finsweet a racheté Wized, un outil qui permet de connecter Webflow à des backends et des APIs en no-code.
Client-First s'inscrit dans cette même philosophie : résoudre un problème concret que tous les studios Webflow rencontrent, avec une solution gratuite, documentée, et maintenue dans la durée. La méthodologie repose sur un système de nomenclature CSS structuré (classes globales, utilitaires, composants, layout) conçu spécifiquement pour les contraintes de l'éditeur Webflow.
2. Utilité
Webflow te laisse nommer tes classes comme tu veux. C'est une liberté qui se retourne contre toi dès que le projet grossit. Sans convention partagée, chaque développeur construit sa propre logique, et ce qui semblait anodin sur quelques pages devient un vrai problème de cohérence et de maintenance sur une dizaine.
C'est là qu'un framework CSS structuré fait toute la différence. Il ne s'agit pas d'utiliser Client-First spécifiquement, il en existe d'autres comme Lumos, Mast ou encore Knockout.css. Ce qui importe, c'est d'en choisir un et de s'y tenir.
Un framework stable et documenté apporte quatre choses concrètes : une maintenance facilitée, une cohérence visuelle sur l'ensemble du site, une meilleure lisibilité pour toute l'équipe, et la capacité à faire évoluer le projet sans risque.
Chez Studio Relief, notre approche Client-First est portée par notre certification Finsweet et par une conviction simple : une convention claire, c’est ce qui rend un site Webflow maintenable et durable.
3. Fonctionnalités
Client-First est une convention, pas un logiciel. Ses « fonctionnalités » sont les ressources et outils qui permettent de l'adopter et de la maintenir efficacement.
- Documentation officielle complète et gratuite : organisation des classes, exemples de nommage, guide de migration v1 → v2, cas d'usage avancés. Disponible sur finsweet.com/client-first et mise à jour régulièrement par l'équipe Finsweet.
- Extension by Finsweet dans l'éditeur Webflow : affiche les classes appliquées sur chaque élément directement dans le designer selon la convention. Réduit les erreurs de nomenclature au quotidien.
- Deux versions majeures (v1 et v2) : avec des guides dédiés pour chacune. La v2 est recommandée pour les nouveaux projets ; un guide de migration est disponible pour les projets existants en v1.
- Compatibilité native avec l'écosystème Finsweet : Attributes, CMS Bridge, Extension : tous conçus pour fonctionner avec Client-First sans configuration supplémentaire.
- Compatible Relume : les composants Relume s'adaptent à la convention sans restructuration majeure.
La convention repose sur un système de 4 catégories de classes (globales, utilitaires, composants, layout). La documentation officielle en détaille la logique et les exemples mieux que n'importe quel article.
→ finsweet.com/client-first
4. Cas concrets
→ Six mois après la livraison d'un site de 40 pages, le client demande de changer la couleur principale et d'augmenter les espacements des sections. On modifie la classe globale color-brand-primary et la classe utilitaire padding-section-medium. Les changements se propagent instantanément sur l'ensemble du site | la demande est traitée en moins de 5 minutes. Sans convention, cette intervention aurait nécessité de parcourir manuellement chaque section du projet.
→ Sur les projets où plusieurs développeurs interviennent | un freelance sur une phase, un collaborateur sur une autre | Client-First sert de langue commune. Chacun retrouve ses repères sans qu'on ait besoin d'expliquer une logique maison spécifique au projet.
5. Prix
Client-First est entièrement gratuit, avec une documentation complète disponible en ligne.
6. Questions fréquentes
Client-First est-il obligatoire pour faire du bon Webflow ?
Non. Mais utiliser un framework CSS stable, documenté et maintenu est fortement conseillé. Un site est vivant, il évolue, se modifie, change de mains. Travailler sans convention, c'est s'exposer à des coûts de maintenance croissants à mesure que le projet grossit.
Client-First ou Lumos, lequel choisir ?
Il n'y a pas de bonne ou de mauvaise réponse. Client-First, Lumos ou encore Mast, ce sont des approches différentes pour répondre au même problème. L'important est de choisir la convention documentée et activement maintenue, et de s'y tenir sur l'ensemble du projet.
Quelle différence entre Client-First v1 et v2 ?
La v2 introduit une organisation plus granulaire des styles globaux et une séparation plus stricte des layouts. Pour les nouveaux projets, la v2 est recommandée. Pour les projets existants en v1, une migration complète est rarement justifiée, l'important est la cohérence interne.
Comment migrer un projet existant vers Client-First ?
La migration se fait section par section, manuellement. On commence généralement par les styles globaux (typographie, couleurs, espacements), puis les layouts, puis les composants. Pour les projets à longue durée de vie, l'effort est rentabilisé dès la première évolution significative.
Client-First est-il compatible avec Relume ?
Oui. Les composants Relume sont adaptables à la convention sans restructuration majeure | voir la documentation Finsweet pour les recommandations selon la version utilisée.
