devpack
Site Audit

Webflow Class Name Generator — Client-First & BEM

Describe a section in plain words — “hero with tagline, heading, two buttons and an image on the right” — and get a consistent class structure in Client-First, BEM or simple kebab-case, ready to copy into Webflow as elements.

Runs in your browser
Try:
Structure — click a class to copy it
Classes
HTML skeleton

  
Starter CSS



    
 Your data never leaves your computer. All processing happens 100% locally in your browser.

    
devpack.app is an independent utility and is not affiliated with, sponsored by, or endorsed by Webflow, Inc. or Figma, Inc. Webflow and Figma are trademarks of their respective owners.

    
    

      
How to use the Class Name Generator
  1. 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”).
  2. Pick a naming convention: Client-First (Finsweet’s Webflow system), BEM or Simple kebab-case. The structure updates as you type.
  3. Click any class in the tree to copy it, or Copy all for the full list. Dashed classes are combo classes.
  4. 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-FirstBEMSimple


Sectionsection_heroherohero-section


Elementhero_headinghero__headinghero-heading


Variantbutton is-secondaryhero__button--secondarybutton is-secondary


Layoutpadding-global › container-large › padding-section-largehero__containercontainer




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 recognises 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.
    • 

Tools that pair well with the Class Name Generator
  • Case Converter — Paste any text and convert it between 11 letter cases — from Title Case for headlines to camelCase and snake_case for 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.
  • Clamp Calculator — Enter a minimum and maximum size and the viewport range — get a zoom-friendly clamp() value with the maths explained, a live preview and a complete fluid type or space scale.
  • 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.
Frequently asked questions
What is Client-First?
Client-First is a free naming system for Webflow created by Finsweet. It uses 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?
Client-First is designed for Webflow’s Style Manager and is the most common choice in agencies. BEM is useful if your team also maintains code outside Webflow or already uses BEM elsewhere. The best convention is the one everyone on the project follows consistently.
Does it use AI?
No — it parses your description with rules and keyword matching right in your browser, so it’s instant, free and private. Describe sections with common words (heading, cards, buttons, image on the right) for the best result.
Can I paste the structure straight into Webflow?
Yes. “Copy structure to Webflow” creates the element tree with all classes (and optional starter styles); select a parent in the Designer and press Ctrl/⌘+V.
What are the dashed classes?
Dashed classes are combo classes — they are applied on top of a base class, for example button is-secondary.

      
    

    
Related tools
HTML & CSS to WebflowPaste HTML and its CSS, click Copy to Webflow and paste into the Designer — you get real Div Blocks,…Class Name Typo CheckerPaste HTML or enter a URL to audit every class name: catch typos like hero_heding, duplicates spelled…SVG to WebflowPaste an SVG from Figma and copy it to Webflow as real Custom Elements — every <svg>, <path> and <g>…Case ConverterPaste any text and convert it between 11 letter cases — from Title Case for headlines to camelCase and…Slug GeneratorConvert any title into a clean, lowercase URL slug — with proper transliteration of accents, umlauts and…Clamp CalculatorEnter a minimum and maximum size and the viewport range — get a zoom-friendly clamp() value with the maths…