Webflow Class Name Generator — Client-First & BEM

Why class naming matters in Webflow

Every class you create in Webflow ends up in the Style Manager and in the site’s CSS. Without a system, projects collect names like div-block-47, Heading 3, hero-title and heroTitle side by side — impossible to reuse and painful to hand over. A naming convention makes classes predictable: anyone on the team (or a client months later) knows what pricing_plan-name is and where it’s used.

The three conventions

Client-First by Finsweet is the most widely used system in the Webflow community: an underscore separates the “folder” (component) from the element — hero_content, hero_image-wrapper — utility classes handle typography and spacing (heading-style-h1, text-size-medium) and combo classes start with is-. BEM (Block, Element, Modifier) is the classic front-end convention and works well when a team also writes code outside Webflow. Simple kebab-case is fine for small sites.

What the generator understands

It recognizes section types (hero, features, testimonials, pricing, FAQ, stats, logos, team, steps, CTA, navbar, footer and more), content (tagline, heading, subheading, paragraph, buttons, image, video, form, list, badge), repeating items with counts (“3 cards”, “six questions”, “4 stats”) and layout hints (“image on the left”, “centered”, “two columns”). Buttons use a global button class with an is-secondary combo — the way most Webflow style guides work.

From names to a built section

With Starter layout CSS on, the structure comes with sensible defaults — container width, section padding, a two-column grid that stacks on tablet, card grids that stack on mobile, and a button style. Copy it to Webflow and you have a working skeleton to design on top of. For fine-tuning, open it in HTML & CSS to Webflow, adjust the code and paste. Later, run the Class Name Typo Checker over the page to catch typos before launch.

Naming tips

• Name by purpose, not appearance: pricing_plan survives a redesign; blue-box doesn’t.
• Keep the folder short and consistent (hero_, pricing_, footer_).
• Use combo classes for variants of the same thing (is-featured, is-dark), new classes for different things.
• Reuse global classes (button, container-large) instead of creating a new one per section.

Aussi recherché comme : webflow class names, client-first, client first class names, bem naming, css naming convention, css class name ideas, webflow naming system, finsweet client-first.

Outils complémentaires : Class Name Generator

• SVG to Webflow — Paste an SVG from Figma and copy it to Webflow as real Custom Elements — every <svg>, <path> and <g> becomes an element you can select, class and edit in the 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.
• Slug Generator — Convert any title into a clean, lowercase URL slug — with proper transliteration of accents, umlauts and Cyrillic, optional stop-word removal and a bulk mode for whole lists.
• 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.