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.
