Comment utiliser : Générateur de classes Webflow
- Décrivez la section en langage courant — ce qu'elle est (hero, fonctionnalités, tarifs, FAQ, footer…) et ce qu'elle contient (« accroche, titre, deux boutons, image à droite », « 3 cartes avec icône et lien »).
- Choisissez une convention de nommage : Client-First (le système Webflow de Finsweet), BEM ou kebab-case Simple. La structure se met à jour au fil de votre saisie.
- Cliquez sur une classe de l'arborescence pour la copier, ou sur Tout copier pour la liste complète. Les classes en pointillés sont des classes combinées.
- Cliquez sur Copier la structure vers Webflow et collez dans le Designer pour obtenir toute l'arborescence d'éléments avec les classes et les styles de mise en page de départ — ou ouvrez-la dans le convertisseur HTML & CSS pour la modifier d'abord.
Pourquoi le nommage des classes compte dans Webflow
Chaque classe créée dans Webflow finit dans le Style Manager et dans le CSS du site. Sans système, les projets accumulent des noms comme div-block-47, Heading 3, hero-title et heroTitle côte à côte — impossible à réutiliser et pénible à transmettre. Une convention de nommage rend les classes prévisibles : chaque membre de l'équipe (ou un client, des mois plus tard) sait ce que pricing_plan-name désigne et où il est utilisé.
Les trois conventions
| Client-First | BEM | Simple | |
|---|---|---|---|
| Section | section_hero | hero | hero-section |
| Élément | hero_heading | hero__heading | hero-heading |
| Variante | button is-secondary | hero__button--secondary | button is-secondary |
| Mise en page | padding-global › container-large › padding-section-large | hero__container | container |
Client-First de Finsweet est le système le plus utilisé dans la communauté Webflow : un trait de soulignement sépare le « dossier » (composant) de l'élément — hero_content, hero_image-wrapper — les classes utilitaires gèrent la typographie et les espacements (heading-style-h1, text-size-medium) et les classes combinées commencent par is-. BEM (Block, Element, Modifier) est la convention classique du front-end et fonctionne bien quand l'équipe écrit aussi du code en dehors de Webflow. Simple en kebab-case convient aux petits sites.
Ce que comprend le générateur
Il reconnaît les types de sections (hero, fonctionnalités, témoignages, tarifs, FAQ, chiffres, logos, équipe, étapes, CTA, navbar, footer et plus), les contenus (accroche, titre, sous-titre, paragraphe, boutons, image, vidéo, formulaire, liste, badge), les éléments répétés avec leur nombre (« 3 cartes », « six questions », « 4 chiffres ») et les indications de mise en page (« image à gauche », « centré », « deux colonnes »). Les boutons utilisent une classe globale button avec une combinaison is-secondary — comme dans la plupart des guides de style Webflow.
Des noms à une section construite
Avec CSS de mise en page de départ activé, la structure est livrée avec des valeurs par défaut cohérentes : largeur de conteneur, marges de section, une grille à deux colonnes qui passe en pile sur tablette, des grilles de cartes qui s'empilent sur mobile et un style de bouton. Copiez-la dans Webflow et vous disposez d'un squelette fonctionnel sur lequel concevoir. Pour affiner, ouvrez-la dans HTML & CSS vers Webflow, ajustez le code et collez-le. Ensuite, lancez le Vérificateur de fautes de noms de classes sur la page pour repérer les coquilles avant la mise en ligne.
Conseils de nommage
- Nommez selon la fonction, pas l'apparence :
pricing_plansurvit à une refonte ;blue-boxnon. - Gardez le dossier court et cohérent (
hero_,pricing_,footer_). - Utilisez les classes combinées pour les variantes d'un même élément (
is-featured,is-dark), et de nouvelles classes pour des éléments différents. - Réutilisez les classes globales (
button,container-large) au lieu d'en créer une par section.
Aussi recherché comme : générateur de noms de classes webflow, noms de classes webflow, client-first webflow, convention de nommage css, nommage bem css, générateur client-first, nommage des classes webflow, idées de noms de classes css.
Outils complémentaires : Générateur de classes Webflow
- SVG vers Webflow — Collez un SVG depuis Figma et copiez-le dans Webflow sous forme de véritables Custom Elements : chaque <svg>, <path> et <g> devient un élément que vous pouvez sélectionner, classer et modifier dans le Navigator.
- Convertisseur de casse — Collez n'importe quel texte et convertissez-le selon l'une des 11 conventions de casse disponibles — de la casse « Title Case » pour les titres à « camelCase » et « snake_case » pour le code.
- Générateur de slug — Convertissez n'importe quel titre en slug URL propre, en minuscules, avec une translittération correcte des accents, des umlauts et du cyrillique, une suppression facultative des mots vides et un mode en masse pour traiter des listes entières.
- Calculateur de colliers de serrage — Saisissez une taille minimale et maximale ainsi que la plage de la fenêtre d'affichage — obtenez une valeur adaptée au zoom clamp() , accompagnée d’explications mathématiques, d’un aperçu en temps réel et d’une échelle complète de la typographie fluide ou de l’espacement.
Questions fréquentes
Qu'est-ce que Client-First ?
dossier_element (par exemple hero_heading), des classes utilitaires globales pour la typographie et les espacements, et des classes combinées qui commencent par is-. Ce générateur suit ses conventions mais n'est pas affilié à Finsweet.Faut-il utiliser Client-First ou BEM dans Webflow ?
Le générateur utilise-t-il l'IA ?
Puis-je coller la structure directement dans Webflow ?
Que sont les classes en pointillés ?
button is-secondary.