Comment utiliser : Vérificateur de classes CSS
- Saisissez l’URL d’une page publiée (votre domaine de test
.webflow.ioconvient) puis cliquez sur Vérifier l’URL. Vous pouvez aussi coller du HTML, une seule section ou simplement une liste de noms de classes. - Facultativement, collez le CSS pour voir également les classes présentes dans la feuille de style mais absentes de la page, ainsi que les classes sans aucun style.
- Choisissez les règles de nommage à appliquer : Client-First, BEM ou aucune.
- Parcourez les résultats (cliquez sur une case de statistique pour accéder à sa liste) et renommez ou fusionnez les classes dans le Style Manager de Webflow. Téléchargez la liste complète des classes au format CSV si nécessaire.
Pourquoi les noms de classes dérivent
Sur un projet Webflow impliquant plusieurs personnes et quelques mois de modifications, les noms de classes finissent par se dégrader. Quelqu’un tape hero_heding une fois, Webflow crée sans broncher une nouvelle classe, et dès lors la moitié des titres utilisent la faute. Les éléments ajoutés hors du panneau Ajouter reçoivent des noms automatiques comme div-block-12 ou text-block-3. Un designer écrit hero-title, un autre hero_title. Chacun de ces cas ajoute du CSS, empêche les modifications globales d’atteindre tous les éléments et complique le nettoyage du Style Manager.
Ce que le vérificateur détecte
| Contrôle | Exemple |
|---|---|
| Fautes de frappe probables (distance d’édition) | is-secondray à côté de is-secondary |
| Doublons au singulier et au pluriel | feature-card et feature-cards |
| Mêmes mots, séparateurs ou casse différents | hero-title, hero_title, heroTitle |
| Valeurs par défaut non nommées de Webflow | div-block-12, link-block-3, heading-7 |
| Problèmes de formatage | Majuscules, chiffres en début de nom, séparateurs doublés, noms très longs |
| Règles Client-First | Plus d’un tiret bas, classes is- utilisées comme classes de base, classes combinées sans is- |
| Règles BEM | Éléments imbriqués comme card__body__title |
| CSS et HTML | Classes présentes dans la feuille de style mais absentes de la page, ou présentes sur la page sans style |
Le contrôle des fautes de frappe est réglé pour éviter les fausses alertes : les séries numérotées (card-1, card-2, heading-style-h2/h3) ainsi que les variantes de taille ou d’état (margin-small/margin-large, is-active/is-inactive) ne sont pas signalées. Lorsque deux noms sont proches, celui qui est le plus utilisé est proposé comme orthographe correcte.
Vérifier un site Webflow complet
Le CSS publié d’un site Webflow contient chaque classe stylisée du projet. Une vérification par URL compare donc la page à la liste complète des classes. C’est un bon moyen de repérer des fautes, même dans des classes utilisées sur d’autres pages. Notez que « présente dans le CSS mais pas sur cette page » signifie seulement que la classe n’est pas utilisée sur la page analysée : contrôlez vos principaux modèles avant de supprimer quoi que ce soit. Les classes w- propres à Webflow sont ignorées.
Corriger les problèmes dans Webflow
- Renommez une classe en sélectionnant un élément qui l’utilise, puis en double-cliquant sur la classe dans le champ Selector : tous les éléments qui l’utilisent sont mis à jour.
- Fusionnez une faute avec la bonne classe en sélectionnant les éléments concernés, en retirant la faute et en appliquant la bonne classe ; supprimez ensuite la classe inutilisée avec Style Manager → Clean up.
- Adoptez une convention pour les nouvelles sections : le Générateur de noms de classes produit des noms cohérents Client-First ou BEM, et HTML & CSS vers Webflow colle les sections codées avec leurs classes.
Avant une mise en ligne ou la remise d’un projet au client, combinez cet outil avec le Vérificateur SEO, le Vérificateur de liens cassés et un README de passation.
Aussi recherché comme : vérificateur classes css, faute de frappe classe css, audit classes webflow, classes en double, convention nommage client-first, classes css inutilisées, nettoyage webflow, div-block webflow.
Outils complémentaires : Vérificateur de classes CSS
- 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.
- Vérificateur de différences — Collez une version originale et une version modifiée pour comparer côte à côte les lignes ajoutées, supprimées et modifiées — les mots exacts qui ont été modifiés étant mis en évidence dans chaque ligne.
- Redirections WordPress vers Webflow — Migrer un site de WordPress vers Webflow modifie presque toutes les URL : chemins d'articles datés, archives /category/, slashes finaux et slugs de pages.
- Webflow Clipboard Bridge — Webflow place les éléments dans le presse-papiers dans un format spécial qui ne voyage pas d’un navigateur à l’autre (Firefox → Chrome, Safari → Edge…).