Cómo usar: Class Name Generator
- Describe the section in plain English — what it is (hero, features, pricing, FAQ, footer…) and what it contains (“tagline, heading, two buttons, image on the right”, “3 cards with icon and link”).
- Pick a naming convention: Client-First (Finsweet’s Webflow system), BEM or Simple kebab-case. The structure updates as you type.
- Click any class in the tree to copy it, or Copy all for the full list. Dashed classes are combo classes.
- Click Copy structure to Webflow and paste into the Designer to get the whole element tree with classes and starter layout styles — or open it in the HTML & CSS converter to edit first.
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 | BEM | Simple | |
|---|---|---|---|
| Section | section_hero | hero | hero-section |
| Element | hero_heading | hero__heading | hero-heading |
| Variant | button is-secondary | hero__button--secondary | button is-secondary |
| Layout | padding-global › container-large › padding-section-large | hero__container | container |
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_plansurvives a redesign;blue-boxdoesn’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.
También se busca como: webflow class names, client-first, client first class names, bem naming, css naming convention, css class name ideas, webflow naming system, finsweet client-first.
Herramientas que combinan con: 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.
- Convertidor de mayúsculas y minúsculas — Pega cualquier texto y conviértelo entre 11 estilos de mayúsculas y minúsculas: desde «Title Case» para titulares hasta «camelCase» y «snake_case» para código.
- 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.
- Calculadora de abrazaderas — Introduce un tamaño mínimo y máximo y el rango de la ventana de visualización: obtendrás un valor fácil de ajustar con el zoom clamp() con una explicación de los cálculos, una vista previa en directo y una escala completa y fluida de tipo o espacio.
Preguntas frecuentes
What is Client-First?
folder_element class names (for example hero_heading), global utility classes for typography and spacing, and combo classes that start with is-. This generator follows its conventions but is not affiliated with Finsweet.Should I use Client-First or BEM in Webflow?
Does it use AI?
Can I paste the structure straight into Webflow?
What are the dashed classes?
button is-secondary.