devpack
EnglishDeutsch · StartseiteFrançais · AccueilEspañol · InicioPortuguês (Brasil) · Início
Auditoria do site

Esta página ainda não foi traduzida para o português, por isso aparece em inglês.

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.

Atualizado em
Try:
Structure — click a class to copy it
Classes

Webflow open in a different browser? Browsers don’t share Webflow’s clipboard data — paste into the Webflow Clipboard Bridge in that browser and copy again.

HTML skeleton

  
Starter CSS



    
 Seus dados nunca saem do seu computador. Todo o processamento acontece localmente no navegador.

    
devpack.app é uma ferramenta independente e não é afiliada, patrocinada ou endossada pela Webflow, Inc. ou pela Figma, Inc. Webflow e Figma são marcas de seus respectivos donos.

    
    

      
Como usar: 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 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.
    • 

Também pesquisado 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.
Ferramentas que combinam com: 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.
  • Conversor de maiúsculas e minúsculas — Cole qualquer texto e converta-o entre 11 estilos de letras — desde “Title Case” para títulos até “camelCase” e “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 braçadeiras — Digite um tamanho mínimo e máximo e o intervalo da janela de visualização — obtenha um valor fácil de ajustar com o zoom clamp() com explicações matemáticas, uma pré-visualização em tempo real e uma escala completa e fluida de fonte ou espaçamento.
Perguntas frequentes
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.
Posso instalar o Class Name Generator como um aplicativo da web e usá-lo offline?
Sim. O Class Name Generator é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.

      
    

    
    
Ferramentas relacionadas
localHTML & CSS to WebflowPaste HTML and its CSS, click Copy to Webflow and paste into the Designer — you get real Div Blocks,…localClass Name Typo CheckerPaste HTML or enter a URL to audit every class name: catch typos like hero_heding, duplicates spelled…localSVG to WebflowPaste an SVG from Figma and copy it to Webflow as real Custom Elements — every <svg>, <path> and <g>…localConversor de maiúsculas e minúsculasCole qualquer texto e converta-o entre 11 estilos de letras — desde “Title Case” para títulos até…localSlug GeneratorConvert any title into a clean, lowercase URL slug — with proper transliteration of accents, umlauts and…localCalculadora de braçadeirasDigite um tamanho mínimo e máximo e o intervalo da janela de visualização — obtenha um valor fácil de…