Comment utiliser : Class Name Typo Checker
- Enter the URL of a published page (your
.webflow.iostaging domain works) and click Check URL — or paste HTML, a single section, or just a list of class names. - Optionally paste the CSS to also see classes that exist in the stylesheet but not on the page, and classes without any styles.
- Choose the naming rules to check against: Client-First, BEM or none.
- Work through the results — click a stat tile to jump to its list — and rename or merge the classes in Webflow’s Style Manager. Download the full class list as CSV if you need it.
Why class names drift
On a Webflow project with several people and a few months of changes, class names slowly fall apart. Someone types hero_heding once, Webflow happily creates a new class, and from then on half the headings use the typo. Elements dropped from the Add panel get auto-names like div-block-12 or text-block-3. One designer writes hero-title, another hero_title. Every one of these adds CSS, makes global changes miss elements and makes the Style Manager harder to clean up.
What the checker finds
| Check | Example |
|---|---|
| Possible typos (edit distance) | is-secondray next to is-secondary |
| Singular/plural duplicates | feature-card and feature-cards |
| Same words, different separators or case | hero-title, hero_title, heroTitle |
| Unnamed Webflow defaults | div-block-12, link-block-3, heading-7 |
| Formatting problems | Uppercase, leading digits, doubled separators, very long names |
| Client-First rules | More than one underscore, is- classes used as base classes, combo classes without is- |
| BEM rules | Nested elements like card__body__title |
| CSS vs HTML | Classes in the stylesheet but not on the page, or on the page without styles |
The typo check is tuned to avoid false alarms: numbered series (card-1, card-2, heading-style-h2/h3) and size or state variants (margin-small/margin-large, is-active/is-inactive) are not flagged. When two names are close, the one used more often is suggested as the correct spelling.
Checking a whole Webflow site
A Webflow site’s published CSS contains every styled class in the project, so a URL check compares the page against the full class list. That makes it a good way to spot typos even in classes used on other pages. Note that “in the CSS but not on this page” only means the class isn’t used on the page you checked — check your main templates before deleting anything. Webflow’s own w- classes are ignored.
Fixing problems in Webflow
- Rename a class by selecting an element that uses it, then double-clicking the class in the Selector field — all elements using it update.
- Merge a typo into the correct class by selecting the elements with the typo, removing it and applying the right class; then delete the unused class with Style Manager → Clean up.
- Agree on a convention for new sections — the Class Name Generator produces consistent Client-First or BEM names, and HTML & CSS to Webflow pastes coded sections with their classes.
Before a launch or client handoff, combine this with the SEO Checker, the Broken Link Checker and a handoff README.
Aussi recherché comme : class name checker, css class typo, webflow class audit, duplicate classes, client-first checker, unused css classes, webflow cleanup, div-block.
Outils complémentaires : Class Name Typo Checker
- 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.
- WordPress to Webflow Redirects — Moving a site from WordPress to Webflow changes almost every URL: dated blog paths, /category/ archives, trailing slashes and page slugs.
- Webflow Clipboard Bridge — Webflow puts elements on the clipboard in a special format that doesn’t travel between browsers (Firefox → Chrome, Safari → Edge…).