How to use the 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.
Tools that pair well with the Class Name Typo Checker
- Case Converter — Paste any text and convert it between 11 letter cases — from Title Case for headlines to camelCase and snake_case for code.
- Diff Checker — Paste an original and a changed version to see added, removed and modified lines side by side — with the exact words that changed highlighted inside each line.
- Figma CSS to Webflow — Turn Figma’s “Copy as CSS” output into tidy values you can type straight into Webflow’s Style panel — absolute positioning and noise removed, units converted.
- Markdown to Webflow Rich Text — Paste Markdown, check the preview and copy it as formatted rich text — headings, lists, links and bold text land correctly in Webflow’s Rich Text element.