WebflowSTRUCTURE WEBFLOW ET
Prérequis
- Projet Webflow avec accès Designer
- Arborescence des pages validée
- Lexique de classes avec préfixe projet
- Breakpoints desktop, tablette et mobile définis
Sans convention de nommage, un projet Webflow devient ingérable : doublons de styles et handoff confus. Les classes utilitaires et composants mal structurés ralentissent toute la chaîne design → dev. Vous allez poser une ossature claire : sections, utilitaires et composants : avant d’ajouter du contenu.
Cadrer l’ossature page et section
Créez une page « Styleguide » interne regroupant containers, titres et espacements. Chaque nouvelle page duplique cette base plutôt que de repartir de zéro.
Découpez chaque template en sections sémantiques (`header`, `hero`, `footer`). Fixez un container max-width et des gutters constants : les designers suivants appliquent les mêmes repères.
Classes utilitaires et combo classes
Réservez les classes `u-*` aux utilitaires réutilisables : `u-container`, `u-grid-2`, `u-text-center`. Elles portent une propriété ou un petit groupe cohérent.
Les combo classes expriment un état (`is-open`, `is-dark`). Nommez chaque classe avant d’ajouter des propriétés : sinon naît un `Div Block 47`.
Composants et props pour la maintenance
Transformez en composants les blocs répétés : carte service, témoignage, CTA. Une mise à jour se propage sur toutes les instances.
Utilisez les props pour texte, image et lien, pas pour des marges arbitraires. Documentez quels composants sont gelés et lesquels acceptent des overrides locaux.
Erreurs fréquentes
Multiplier les classes pour un même rendu (`heading-large`, `title-big`) : fusionnez avant livraison.
Laisser les divs par défaut (`Div Block`, `Image 2`) : l’arborescence Navigator devient illisible.
Créer des composants trop larges (page entière) : impossible à réutiliser.
Oublier de purger les classes orphelines avant export.
Ce qu’il faut retenir
Styleguide + préfixe projet = base stable pour toute l’équipe.
Utilitaires `u-*`, combo `is-*`, composants avec props : trois niveaux distincts.
Nommage explicite dès la création, pas de correction massive en fin de sprint.
FAQ
Client-First est une référence solide pour les équipes multiples. L’essentiel est la cohérence : un système documenté vaut mieux qu’un mélange de conventions.
Démarrez avec container, section spacing et grille de base. Enrichissez au fil des pages réelles, pas un catalogue inutilisé.
Oui via le panneau « Style Manager », mais prévoyez une fenêtre dédiée hors sprint client. Testez les composants impactés sur les breakpoints principaux avant de livrer.
