Gerador de Nomes de Classes Webflow — Client-First & BEM

Por que a nomenclatura de classes importa no Webflow

Toda classe que você cria no Webflow acaba no Style Manager e no CSS do site. Sem um sistema, os projetos acumulam nomes como div-block-47, Heading 3, hero-title e heroTitle lado a lado — impossíveis de reutilizar e difíceis de passar para outra pessoa. Uma convenção de nomes torna as classes previsíveis: qualquer pessoa da equipe (ou um cliente meses depois) sabe o que é pricing_plan-name e onde ele é usado.

As três convenções

Client-First, do Finsweet, é o sistema mais usado na comunidade Webflow: um sublinhado separa a “pasta” (componente) do elemento — hero_content, hero_image-wrapper — classes utilitárias cuidam de tipografia e espaçamento (heading-style-h1, text-size-medium) e as classes combo começam com is-. BEM (Block, Element, Modifier) é a convenção clássica do front-end e funciona bem quando a equipe também escreve código fora do Webflow. O kebab-case Simples serve bem para sites pequenos.

O que o gerador entende

Ele reconhece tipos de seção (hero, recursos, depoimentos, preços, FAQ, números, logos, equipe, passos, CTA, navbar, rodapé e mais), conteúdos (slogan, título, subtítulo, parágrafo, botões, imagem, vídeo, formulário, lista, badge), itens repetidos com quantidade (“3 cards”, “seis perguntas”, “4 números”) e dicas de layout (“imagem à esquerda”, “centralizado”, “duas colunas”). Os botões usam uma classe global button com a combo is-secondary — da mesma forma que a maioria dos guias de estilo no Webflow funciona.

Dos nomes à seção construída

Com o CSS de layout inicial ativado, a estrutura vem com padrões sensatos — largura do container, padding da seção, uma grade de duas colunas que empilha no tablet, grades de cards que empilham no celular e um estilo de botão. Copie para o Webflow e você tem um esqueleto funcional para desenhar por cima. Para ajustes finos, abra no HTML & CSS to Webflow, ajuste o código e cole. Depois, passe o Class Name Typo Checker pela página para pegar erros de digitação antes do lançamento.

Dicas de nomenclatura

• Nomeie pela função, não pela aparência: pricing_plan sobrevive a um redesign; blue-box não.
• Mantenha a pasta curta e consistente (hero_, pricing_, footer_).
• Use classes combo para variações da mesma coisa (is-featured, is-dark) e classes novas para coisas diferentes.
• Reutilize classes globais (button, container-large) em vez de criar uma nova para cada seção.

Também pesquisado como: gerador de nomes de classes webflow, nomenclatura de classes webflow, client-first webflow, convenção de nomes css, nomes de classes css bem, sistema de nomenclatura webflow, finsweet client-first, gerador de classes css.

Ferramentas que combinam com: Gerador de Classes Webflow

• SVG para Webflow — Cole um SVG do Figma e copie para o Webflow como Custom Elements de verdade.
• 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.
• Gerador de Slug — Converta qualquer título em um slug de URL limpo e em minúsculas, com transliteração correta de acentos, umlauts e cirílico, remoção opcional de stop words e um modo em massa para listas inteiras.
• 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.