Como usar: Verificador de Erros em Nomes de Classes
- Informe a URL de uma página publicada (seu domínio de staging
.webflow.iofunciona) e clique em Verificar URL. Você também pode colar o HTML, uma seção específica ou apenas uma lista de nomes de classes. - Opcionalmente, cole o CSS para ver também as classes que existem na folha de estilos, mas não na página, e as classes sem nenhum estilo.
- Escolha as regras de nomenclatura para a verificação: Client-First, BEM ou nenhuma.
- Analise os resultados (clique em um card de estatística para ir até a sua lista) e renomeie ou mescle as classes no Style Manager do Webflow. Se precisar, baixe a lista completa de classes em CSV.
Por que os nomes de classes se desorganizam
Em um projeto no Webflow com várias pessoas e alguns meses de alterações, os nomes de classes vão se bagunçando aos poucos. Alguém digita hero_heding uma vez, o Webflow cria uma nova classe sem reclamar e, a partir daí, metade dos títulos usa o erro de digitação. Elementos adicionados sem escolher uma classe ganham nomes automáticos como div-block-12 ou text-block-3. Um designer escreve hero-title, outro escreve hero_title. Cada um desses casos adiciona CSS, faz alterações globais deixarem de atingir alguns elementos e torna o Style Manager mais difícil de limpar.
O que o verificador encontra
| Verificação | Exemplo |
|---|---|
| Possíveis erros de digitação (distância de edição) | is-secondray ao lado de is-secondary |
| Duplicatas no singular/plural | feature-card e feature-cards |
| Mesmas palavras, com separadores ou maiúsculas diferentes | hero-title, hero_title, heroTitle |
| Padrões automáticos sem nome do Webflow | div-block-12, link-block-3, heading-7 |
| Problemas de formatação | Letras maiúsculas, números no início, separadores duplicados, nomes muito longos |
| Regras do Client-First | Mais de um underline, classes is- usadas como classes base, classes combo sem is- |
| Regras do BEM | Elementos aninhados como card__body__title |
| CSS x HTML | Classes na folha de estilos que não estão na página, ou na página sem estilos |
A verificação de erros de digitação foi ajustada para evitar falsos alarmes: séries numeradas (card-1, card-2, heading-style-h2/h3) e variações de tamanho ou estado (margin-small/margin-large, is-active/is-inactive) não são sinalizadas. Quando dois nomes são parecidos, o mais usado é sugerido como grafia correta.
Verificando um site inteiro no Webflow
O CSS publicado de um site no Webflow contém todas as classes estilizadas do projeto, então a verificação por URL compara a página com a lista completa de classes. Isso a torna uma boa forma de encontrar erros de digitação, inclusive em classes usadas em outras páginas. Lembre que “está no CSS, mas não nesta página” significa apenas que a classe não é usada na página verificada. Confira seus principais templates antes de excluir qualquer coisa. As classes w- do próprio Webflow são ignoradas.
Corrigindo problemas no Webflow
- Renomeie uma classe selecionando um elemento que a use e, em seguida, dando um duplo clique na classe no campo Selector. Todos os elementos que usam a classe serão atualizados.
- Mescle um erro de digitação na classe correta selecionando os elementos com o erro, removendo-o e aplicando a classe certa. Depois, exclua a classe não utilizada com Style Manager → Clean up.
- Combine uma convenção para as novas seções: o Gerador de Nomes de Classes cria nomes consistentes em Client-First ou BEM, e o HTML & CSS para Webflow cola seções codificadas com suas classes.
Antes de um lançamento ou da entrega ao cliente, combine esta ferramenta com o Verificador de SEO, o Verificador de Links Quebrados e um README de entrega.
Também pesquisado como: verificador de classes css, erro de digitação css, auditoria de classes webflow, classes duplicadas, client-first checker, classes css não utilizadas, limpeza webflow, div-block.
Ferramentas que combinam com: Verificador de Erros em Nomes de Classes
- 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.
- Verificador de Diferenças — Cole uma versão original e uma versão alterada para ver lado a lado as linhas adicionadas, removidas e modificadas — com as palavras exatas que mudaram destacadas dentro de cada linha.
- Redirecionamentos WordPress para Webflow — Ao migrar um site do WordPress para o Webflow, quase todas as URLs mudam: caminhos de posts com data, arquivos /category/, barras no final e slugs de páginas.
- Webflow Clipboard Bridge — O Webflow coloca elementos na área de transferência em um formato especial que não funciona entre navegadores (Firefox → Chrome, Safari → Edge…).