Client-First (Finsweet)

Ce qu'est vraiment Client-First

Client-First est un système de nommage et de structure pour Webflow, créé et publié gratuitement par l'agence Finsweet. Ce n'est ni un plugin, ni un script, ni un produit payant. C'est un ensemble documenté de conventions qui indiquent comment nommer vos classes CSS, comment organiser vos dossiers de styles et comment structurer les éléments d'une page pour que le projet reste lisible longtemps après sa construction. Le nom résume l'intention : un site bâti ainsi peut être remis à un client, ou repris par un autre développeur, sans séance de décryptage.

L'idée fondatrice est qu'un projet Webflow est un document partagé, pas un brouillon privé. Comme Webflow affiche les noms de classes directement dans l'interface, ces noms deviennent la documentation. Une classe nommée padding-global ou heading-style-h2 dit ce qu'elle fait d'un coup d'oeil, là où une classe nommée p1 ou box3 ne dit rien. Client-First transforme cette différence en un standard répétable, pour que chaque page de chaque projet se lise de la même façon.

Comment le système fonctionne

Client-First organise le style en un petit nombre de couches claires. Tout en haut se trouvent les classes de structure globale qui garantissent la cohérence de la mise en page sur l'ensemble du site.

• Wrappers de page et de section comme page-wrapper et section, qui cadrent la mise en page générale.
• Classes de conteneur comme container-large ou container-small, qui plafonnent la largeur du contenu de façon prévisible.
• Classes de padding global comme padding-global et les utilitaires padding-section, qui maintiennent un rythme vertical et horizontal cohérent.

Classes utilitaires et système d'espacement

Sous la couche structurelle, Client-First s'appuie beaucoup sur les classes utilitaires : de petites classes à usage unique que l'on combine plutôt que de restyler. Une classe margin-bottom associée à une valeur d'espacement, ou une classe text-size, se réutilise partout au lieu d'inventer une nouvelle classe à chaque fois. Le système d'espacement, en particulier, est une échelle nommée : le designer choisit dans un jeu cohérent d'écarts plutôt que de taper des valeurs en pixels arbitraires. C'est ce qui garde un grand site visuellement cohérent et rapide à ajuster.

Client-First face au BEM et aux autres conventions

Le web connaissait déjà des conventions de nommage avant Client-First, la plus connue étant BEM (Block Element Modifier). BEM a été pensé pour du CSS et du HTML écrits à la main, où l'on tape des noms longs et structurés comme card__title--featured pour exprimer la hiérarchie dans le balisage. Il excelle pour la modularité du code source, mais reste verbeux à gérer dans un constructeur visuel.

Client-First reprend l'esprit de BEM, des noms lisibles et prévisibles, mais l'adapte au fonctionnement réel de Webflow. Dans Webflow, on empile des combo classes, on parcourt une liste de classes dans un panneau latéral et on veut des noms qui se lisent en langage clair. Client-First privilégie donc la lisibilité humaine et les classes utilitaires réutilisables, là où BEM vise surtout la modularité stricte par bloc. Aucun n'est objectivement supérieur : BEM convient à une base de code écrite à la main, Client-First convient à un projet Webflow où l'interface est l'éditeur et où les noms de classes sont la documentation.

Quand l'utiliser, et ses limites

Client-First montre sa valeur sur tout projet destiné à être maintenu : un site à plusieurs contributeurs, une construction qui sera remise à un client, ou un template destiné à être réutilisé. Plus le projet est grand et durable, plus la convention rapporte, car une structure claire rend l'ajout d'une section six mois plus tard trivial au lieu de risqué.

Ses limites méritent d'être nommées honnêtement. Client-First est une convention, pas une garantie : une équipe peut respecter les noms de dossiers et faire quand même du désordre si elle n'en respecte pas l'esprit. Il demande un temps d'apprentissage, et l'appliquer à moitié est parfois pire que ne pas l'appliquer, car cela crée l'apparence de l'ordre sans la substance. Sur un tout petit site d'une page à un seul auteur, le système complet peut être plus de cérémonie que le projet n'en a besoin, même si les habitudes de nommage n'y font aucun mal.

Erreurs et pièges fréquents

L'erreur la plus fréquente est de traiter Client-First comme une couche de peinture appliquée à la fin plutôt qu'une décision prise au départ. Renommer les classes tard dans un projet est fastidieux et propice aux erreurs. Deuxième piège : sur-empiler les combo classes, jusqu'à quatre ou cinq classes sur un élément, au point que personne ne sait plus quel style l'emporte. Troisième piège : inventer des classes sur mesure pour ce que le système d'utilitaires couvre déjà, ce qui ruine en douce l'intérêt d'un vocabulaire partagé. On oublie aussi que la cohérence prime sur la pureté : mieux vaut suivre la convention imparfaitement mais uniformément que mélanger trois styles sur un même site.

Client-First chez BeBranded

Chez BeBranded, Client-First est le standard de construction par défaut, pas une option. Chaque projet démarre de la structure de base recommandée : classes globales de mise en page, échelle d'espacement nommée et styles de titres réutilisables sont en place avant que la première section ne soit designée. Cela signifie que deux personnes de l'équipe construisent de la même façon, qu'un client peut mettre à jour son propre site sans casser le style, et qu'une autre agence pourrait reprendre le projet sans repartir de zéro. On traite les noms de classes comme une documentation vivante, de sorte que le site s'explique lui-même. Le bénéfice n'est pas esthétique, il est opérationnel : montée en main plus rapide, modifications plus sûres et coût de possession plus bas sur toute la vie du site. En clair, Client-First est notre manière de faire de la maintenabilité une fonctionnalité plutôt qu'une pensée d'après-coup.