Méthode Client First sur Webflow : principes et bénéfices (2026)

Qu'est-ce que la méthode Client First ?

Client First est un système de style pour Webflow développé par Finsweet. Sa promesse tient dans son nom : construire en pensant d'abord à celui qui reprendra le projet. Le client, un autre intégrateur, une autre agence.

Finsweet le formule comme un état d'esprit avant d'être une liste de règles. Concrètement, cela se traduit par cinq engagements : un système identique sur tous les projets, une stratégie de nommage explicite, des structures de page standardisées, un projet administrable et prêt à évoluer, et une lisibilité pour toute personne qui ouvre le Designer sans avoir participé à la construction.

La version actuelle est la V2, sortie le 26 août 2022. Elle a renommé plusieurs classes et surtout changé le sens du tiret bas, point sur lequel nous revenons plus loin. Si vous croisez encore de la documentation qui parle de page-padding ou de section-hero avec un tiret, vous lisez de la V1.

Une précision utile : Client First n'enseigne ni le HTML ni le CSS. Finsweet le dit explicitement. La méthode suppose que les bases sont acquises et se contente d'imposer une discipline par-dessus.

Le problème que Client First résout

Tout projet Webflow commence propre. Le problème arrive au troisième mois, quand le site a grossi, que deux personnes y ont touché, et que le panneau Style Manager compte quatre cents classes dont personne ne se souvient de l'usage.

Les symptômes sont toujours les mêmes. Des classes créées en double parce qu'on ne retrouvait pas l'existante. Des noms qui décrivent une apparence plutôt qu'un rôle, du type texte-bleu-gros, devenus faux le jour où la charte a changé. Des empilements de cinq classes sur un même élément, impossibles à démêler. Une modification anodine qui casse trois pages ailleurs.

Ce désordre a un coût mesurable. Chaque modification prend plus de temps que la précédente. La passation au client devient impossible, ce qui l'enferme chez son prestataire. Et le jour où le site doit évoluer, le devis de refonte arrive plus vite que prévu. C'est exactement le scénario que nous cherchons à éviter sur les projets que nous livrons, au même titre que les erreurs classiques de création d'un site Webflow.

Les quatre types de classes

Client First répartit toutes les classes d'un projet en quatre catégories. C'est le socle du système : savoir dans quelle catégorie tombe la classe que vous êtes en train de créer détermine son nom.

Les classes utilitaires

Une classe utilitaire porte une combinaison précise de propriétés CSS, applicable partout dans le projet. Elle ne contient jamais de tiret bas, uniquement des tirets.

Exemples tirés de la documentation : text-size-large, margin-large, background-color-grey, text-color-black. Ce sont les briques du système. Vous les utilisez en permanence et vous n'en créez de nouvelles que rarement.

Les classes personnalisées

Une classe personnalisée est créée pour un composant, une page ou un élément unique que le système utilitaire ne couvre pas. Elle contient au moins un tiret bas.

Exemples de la documentation : header_content, faq_item, testimonial-slider_headshot, team-list_headshot-wrapper. Finsweet met en garde : créer une classe personnalisée ne devrait pas être un réflexe. Avant d'en écrire une, la question est de savoir si trois classes utilitaires ne feraient pas le même travail.

Les classes globales

Une classe globale n'est pas un troisième type de nommage, c'est une classification d'usage : une classe destinée à servir dans tout le projet. Une classe utilitaire est globale par nature, une classe personnalisée peut l'être aussi, par exemple celle d'un composant réutilisé sur dix pages.

Les combo classes

Une combo class est une variante d'une classe de base : elle en hérite les styles et en modifie quelques-uns. Client First impose un préfixe, is-, pour qu'on identifie immédiatement une variante.

Le cas d'école est le bouton : une classe button qui porte le style de base, puis is-secondary, is-text ou is-inactive pour les déclinaisons. Autres exemples de la doc : text-size-large is-home-header, section_header is-home.

La structure de page : les six classes de base

Client First impose une architecture identique sur chaque page. C'est probablement la partie la plus visible du système, et celle qui rend un projet immédiatement reconnaissable quand on ouvre le Navigator.

L'imbrication, du plus externe au plus interne :

• page-wrapper : le div qui englobe absolument tout le contenu de la page. Il existe pour éviter de styler le body directement. Sur le body, on ne met que la typographie et la couleur de fond, le reste va ici.
• nav : la navigation, à l'intérieur de page-wrapper mais à l'extérieur de main-wrapper.
• main-wrapper : le contenu principal, avec la balise HTML main. La navigation et le pied de page ne doivent pas s'y trouver, pour des raisons d'accessibilité.
• section_[identifiant] : englobe une section entière de contenu, avec la balise section. C'est une classe personnalisée, d'où le tiret bas. L'identifiant transforme le Navigator en plan de la page : section_header, section_services, section_contact.
• padding-global : gère l'espacement horizontal global de la page. Cette classe ne porte que padding-left et padding-right, rien d'autre.
• container-[taille] : le système de conteneur unifié, en trois largeurs. container-small, container-medium, container-large. Il centre le contenu et lui impose une largeur maximale.
• padding-section-[taille] : l'espacement vertical de la section, en padding-top et padding-bottom. Trois tailles également. La documentation anglaise recommande de le poser sur le même div que padding-global plutôt que d'ajouter un niveau d'imbrication.
• footer : hors de main-wrapper, comme la navigation.

La structure par défaut d'une section se lit donc ainsi : main-wrapper, puis section_[identifiant], puis padding-global, puis container-large.

L'intérêt est moins esthétique que pratique. Quand chaque page suit le même schéma, on sait où cliquer sans réfléchir, et une modification d'espacement global se fait à un seul endroit.

Le système d'espacement

C'est la partie du système qui fait gagner le plus de temps au quotidien, et celle qui surprend le plus au début.

L'espacement ne se règle pas au pixel dans le panneau de style. Il s'applique en empilant deux classes utilitaires : une classe de direction et une classe de taille.

Les classes de direction couvrent margin-top, margin-bottom, margin-left, margin-right, margin-horizontal, margin-vertical, et les six équivalents en padding.

L'échelle de tailles, du plus petit au plus grand, est la même pour les marges et les paddings :

• 0 : 0rem
• tiny : 0.125rem
• xxsmall : 0.25rem
• xsmall : 0.5rem
• small : 1rem
• medium : 2rem
• large : 3rem
• xlarge : 4rem
• xxlarge : 5rem
• huge : 6rem
• xhuge : 8rem
• xxhuge : 12rem

Trois valeurs intermédiaires existent hors échelle pour les cas qui ne tombent pas juste : custom1 à 1.5rem, custom2 à 2.5rem, custom3 à 3.5rem.

Un espacement s'écrit donc margin-bottom plus margin-medium. Deux classes, aucune valeur saisie à la main, et une cohérence garantie sur tout le site.

Les trois façons d'appliquer un espacement

Finsweet documente trois implémentations, à choisir selon le contexte :

• Le spacing block : un div vide entre deux éléments frères, qui porte un padding-bottom et une taille. Simple, visible dans le Navigator.
• Le spacing wrapper : un div qui enveloppe le contenu et porte l'espacement. Utile quand l'élément doit rester solidaire de sa marge.
• Le CSS Grid : un parent en grid dont les gap gèrent l'espacement des enfants. C'est souvent la solution la plus propre pour une liste ou une grille de cartes.

La convention de nommage : le tiret bas fait le dossier

C'est le changement conceptuel majeur de la V2, et la source de confusion la plus fréquente pour qui vient de la V1.

En V2, la règle est arithmétique : un tiret bas égale un dossier, deux tirets bas égalent deux dossiers imbriqués.

• home-testimonials_wrapper crée un dossier home-testimonials contenant un élément wrapper.
• home_testimonials_wrapper crée un dossier home, un sous-dossier testimonials, et l'élément wrapper dedans.

Le tiret, lui, sépare simplement les mots à l'intérieur d'un segment. Dans team-list_headshot-wrapper, le dossier est team-list et l'élément est headshot-wrapper.

Ces dossiers sont virtuels : c'est l'extension Finsweet qui les affiche comme une arborescence dans le Designer, à partir de la convention de nommage.

Du général au spécifique

Les mots-clés d'un nom de classe vont toujours du plus général au plus précis. text-size-large se lit : la famille texte, la propriété taille, la valeur grande. team-list_headshot-wrapper se lit : le composant, l'élément, son rôle.

Cette règle vaut aussi pour les classes utilitaires, où le tiret crée lui aussi une hiérarchie de dossiers : text-color-black et text-color-white se regroupent dans un sous-dossier color à l'intérieur d'un dossier text.

Jusqu'où imbriquer

La documentation ne fixe pas de limite dure, elle donne un critère de jugement : n'imbriquez que si l'avantage organisationnel est évident. Les repères proposés :

• Un niveau pour les petits sites sur mesure, les composants globaux réutilisables, et les dossiers de moins d'une douzaine d'éléments.
• Deux niveaux pour les gros projets et les bibliothèques de composants à nombreuses variantes, quand plus d'une centaine d'éléments réclament une couche d'organisation supplémentaire.

Un mot sur les composants : en V2, si un élément doit être considéré comme un composant, on utilise le mot component comme identifiant, d'où des noms comme form_component ou client-slider_component. C'est la contrepartie du changement de sens du tiret bas, qui désignait un composant en V1. Le sujet rejoint celui des composants personnalisés dans Webflow.

Les combo classes et la règle anti-empilement

Client First tolère les combo classes mais fixe une limite explicite au nombre de classes empilées sur un même élément :

• Une à deux classes : c'est le cas normal, aucun problème.
• Trois classes : acceptable, mais la documentation pose la question, pourquoi trois.
• Quatre classes : le maximum absolu.
• Cinq et plus : trop. Créez une classe personnalisée à la place.

La raison n'est pas dogmatique. Webflow ne permet pas de réordonner les classes empilées sur un élément, et l'ordre détermine qui gagne en cas de conflit. Au-delà de quatre, le comportement devient difficile à prévoir et impossible à corriger proprement.

La typographie : les balises d'abord

Client First prend le parti inverse de beaucoup de systèmes utilitaires : les balises HTML portent les styles par défaut. On style H1 à H6 et le corps de texte directement, sans classe. Les classes n'interviennent que pour les variations.

Finsweet identifie trois cas où une classe typographique se justifie :

• une variation ponctuelle de taille, de couleur ou de graisse ;
• un conflit entre style et sémantique : heading-style-h2 permet d'appliquer l'apparence d'un H2 à une balise H1, ce qui règle le cas fréquent du titre principal qu'on veut discret sans casser la hiérarchie ;
• donner l'allure d'un titre à un élément qui n'en est pas un, pour éviter d'ajouter une balise heading inutile.

Ce troisième point mérite d'être souligné, parce qu'il touche directement au référencement : un H2 utilisé pour son apparence pollue la structure de la page. Le système utilitaire donne le moyen de séparer les deux.

Les rem, et le mythe du 62,5 %

Client First travaille en rem, pas en pixels. Le rem est une unité relative calée sur la taille de police de l'élément racine.

La documentation est claire sur la base de calcul : 16 pixels. Pour convertir, on divise par 16. 64px valent 4rem, 2rem valent 32px.

C'est un point sur lequel beaucoup de tutoriels se trompent : la technique du root font-size à 62,5 % pour obtenir 1rem égale 10px, très répandue ailleurs, ne figure pas dans la documentation Client First. Le système reste sur la base 16 pixels.

Trois exceptions à la conversion systématique :

• en typographie, 14px soit 0.875rem est acceptable, 12px étant jugé trop petit ;
• pour les micro-espacements, 2px valent 0.125rem ;
• les bordures d'un pixel restent en pixels, on ne les convertit pas.

Le responsive fluide

Pour l'adaptation aux écrans, Client First recommande le root font scaling plutôt que les unités vw et vh. Le principe : faire varier la taille de police racine aux différents points de rupture, ce qui fait suivre mécaniquement toutes les valeurs en rem.

Les arguments avancés par Finsweet sont solides. La méthode ne change rien au workflow habituel, elle respecte les réglages de taille de police du navigateur de l'utilisateur, donc l'accessibilité, elle se maintient plus facilement qu'un projet truffé de vw, elle se comporte correctement au zoom, et elle peut s'ajouter en fin de projet comme une amélioration optionnelle.

C'est une approche complémentaire des principes généraux du responsive design sur Webflow.

La spécificité CSS, le vrai piège

C'est la difficulté technique la plus concrète du système, et Finsweet lui consacre une page entière.

Webflow ajoute les classes à la feuille de style dans l'ordre où vous les créez. En cas de conflit, la dernière créée gagne. Ce détail casse le système d'espacement quand l'ordre est mauvais.

Le cas typique : vous appliquez margin-bottom puis margin-large. Si les classes de taille ont été créées après les classes de direction, la taille est plus spécifique, et vous vous retrouvez avec une marge large sur les quatre côtés au lieu du seul bas. Le comportement est correct du point de vue du CSS, il est juste inattendu.

Autre cas fréquent : une classe utilitaire hide écrasée par une classe personnalisée créée plus tard.

Finsweet le rappelle à juste titre : ce n'est pas un défaut de Client First, c'est le fonctionnement du CSS. Mais c'est la raison pour laquelle il faut partir du clonable officiel, où l'ordre de création des classes est déjà correct, plutôt que de reconstruire le système à la main.

Les outils de l'écosystème

• Le clonable Client First : le projet de départ officiel, avec une page de style guide contenant toutes les classes pré-construites. Aucune page, aucune mise en page, rien à supprimer. Il existe en version française.
• Le Global Styles Embed : un bloc CSS livré avec le clonable. Il gère le lissage du texte, les états de focus, la suppression des marges parasites dans les Rich Text, le centrage des conteneurs, l'activation de inline-flex dans le Designer.
• L'extension Finsweet : elle génère l'arborescence de dossiers virtuels dans le Designer à partir de la convention de nommage.
• La bibliothèque Figma Client First : un kit Figma to Webflow aligné sur le système, utile si votre chaîne de production part de Figma vers Webflow.
• Relume : la plus grande bibliothèque de composants Webflow construite en Client First.
• Un convertisseur px vers rem, intégré à la documentation.

Client First et le SEO

Disons-le clairement : Client First n'est pas une méthode SEO et n'améliore aucun classement par elle-même. Google ne lit pas vos noms de classes.

L'effet est indirect, mais réel sur trois points.

D'abord la sémantique. La méthode impose la balise main sur le contenu principal et la balise section sur les sections. Elle fournit aussi heading-style-h#, qui permet de garder une hiérarchie de titres correcte sans sacrifier le design. Beaucoup de sites cassent leur structure H1-H2-H3 pour des raisons purement visuelles, ce problème disparaît.

Ensuite la performance. Un projet sans classes en double et sans empilements produit une feuille de style plus légère. Ce n'est pas spectaculaire, mais cela joue sur les Core Web Vitals, et surtout cela rend les optimisations ultérieures possibles sans tout casser.

Enfin la maintenabilité. Un site propre se corrige vite. Quand un audit technique SEO remonte trente points à traiter, la différence entre un projet structuré et un projet en vrac se compte en jours de travail. C'est aussi ce qui rend possible l'ajout propre de données structurées sur les pages de collection.

Les limites de la méthode

Client First n'est pas gratuit en temps, et Finsweet ne le cache pas.

La courbe d'apprentissage est réelle. La documentation prévient qu'il est normal de ne pas comprendre une page à la première lecture, et que l'assimilation complète peut prendre des mois. Ce n'est pas un système qui s'apprend en une journée.

La rigueur est une condition, pas un bonus. Une convention appliquée à moitié par une équipe qui ne la partage pas produit un résultat pire qu'une absence de convention, parce qu'elle donne l'illusion de l'ordre.

Le système est verbeux. Deux classes pour une marge, ça surprend quand on vient d'un réglage direct dans le panneau de style. Le gain n'apparaît qu'à l'échelle.

Ce n'est pas toujours le bon outil. Pour une landing page unique, jetable, construite en deux jours, une convention plus légère suffit. L'investissement se rentabilise dès que le projet doit durer, grandir, ou passer entre plusieurs mains.

Migrer un projet existant

Reprendre un site Webflow désordonné pour le passer en Client First est un chantier à part entière. Quelques repères issus de notre pratique.

Une migration complète en une passe est rarement réaliste sur un site vivant. La bascule progressive fonctionne mieux : on part du clonable pour les nouvelles pages, on convertit les composants globaux d'abord, navigation, pied de page, boutons, puis les sections page par page à l'occasion des évolutions déjà prévues.

L'ordre de création des classes compte, pour les raisons de spécificité vues plus haut. Il vaut mieux importer le système utilitaire dans le bon ordre au début plutôt que d'ajouter les classes au fil de l'eau.

Et il faut arbitrer honnêtement : sur un site très ancien, une refonte revient parfois moins cher qu'une conversion.

Le rôle d'une agence

Connaître la méthode ne suffit pas. Ce qui fait la différence, c'est la constance : appliquer la même convention sur tous les projets, la documenter, et former les personnes qui reprennent le site.

C'est aussi une question de sortie. Un site livré en Client First est un site que vous pouvez confier à quelqu'un d'autre, ou reprendre en interne. C'est précisément pour cela que la méthode s'appelle Client First, et c'est un critère que nous vous invitons à poser à n'importe quel prestataire.

Une agence Webflow structurée applique ce type de méthode par défaut. Pour aller plus loin sur l'organisation d'un projet, voyez aussi notre guide complet du Webflow Designer et notre article sur l'atomic design, dont l'esprit rejoint celui de Client First.

FAQ sur la méthode Client First

Qui a créé la méthode Client First ?

Client First a été développée par Finsweet, un studio spécialisé Webflow. C'est aujourd'hui l'une des conventions de nommage les plus utilisées dans l'écosystème Webflow, et la base de bibliothèques comme Relume.

Quelle est la différence entre Client First V1 et V2 ?

La V2, sortie en août 2022, a renommé page-padding en padding-global et section-[identifiant] en section_[identifiant]. Surtout, le tiret bas a changé de sens : il désignait un composant en V1, il désigne un dossier en V2. La V2 a aussi ajouté padding-section-[taille] et heading-style-h#, et supprimé les classes show-.

Que signifie le tiret bas dans un nom de classe ?

Un dossier. Un tiret bas égale un niveau de dossier, deux tirets bas égalent deux niveaux imbriqués. Le tiret simple, lui, ne sert qu'à séparer les mots à l'intérieur d'un segment.

Combien de classes peut-on empiler sur un élément ?

Quatre au maximum absolu, une ou deux en usage normal. Au-delà, la documentation recommande de créer une classe personnalisée, notamment parce que Webflow ne permet pas de réordonner les classes empilées.

Client First utilise-t-elle la technique du 62,5 % ?

Non. La documentation calcule les rem sur la base standard de 16 pixels. La technique du root font-size à 62,5 % pour obtenir 1rem égale 10px n'y figure pas.

Client First améliore-t-elle le SEO ?

Pas directement, ce n'est pas une méthode SEO. Elle sert le référencement de façon indirecte, par la sémantique HTML qu'elle impose, par une feuille de style plus légère, et parce qu'un projet propre se corrige et évolue sans casse.

Client First convient-elle à tous les projets ?

Elle est surtout utile aux projets destinés à durer, à grandir ou à être repris par plusieurs personnes. Pour une landing page ponctuelle, une convention plus légère peut suffire.

Faut-il une formation pour utiliser Client First ?

Un temps d'apprentissage est nécessaire, et Finsweet prévient qu'il peut se compter en mois. La documentation officielle est complète et gratuite, et le meilleur moyen de progresser reste de partir du clonable officiel sur un vrai projet.

Par où commencer concrètement ?

Par le clonable Client First. Il contient le style guide et toutes les classes du système, créées dans le bon ordre, ce qui vous évite les problèmes de spécificité CSS. Vous construisez par-dessus, sans rien avoir à supprimer.

Conclusion

Client First ne change pas l'apparence d'un site, elle change la façon dont il est construit. Quatre types de classes, une structure de page identique partout, un système d'espacement à deux classes, et une convention de nommage qui range le projet toute seule.

L'investissement est réel, en apprentissage comme en discipline. Il se rentabilise dès qu'un projet grandit ou passe entre plusieurs mains, c'est-à-dire dans la quasi-totalité des projets professionnels.

Si vous voulez un site Webflow propre, scalable et que vous pourrez faire évoluer sans dépendre de personne, parlez de votre projet à notre équipe.