Guia de convenções de nomenclatura

camelCase vs kebab-case

camelCase remove separadores e marca palavras com maiúsculas; kebab-case une palavras minúsculas com hífens. Os dois aparecem em camadas diferentes de projetos web.

Por Equipe editorial do Camel Case ConverterPublicado em 12 de set. de 2026Última revisão 13 de set. de 2026

Comparação rápida

Diferença	camelCase	kebab-case
Exemplo	backgroundColor	background-color
Uso comum	Identificadores JavaScript, propriedades de objeto, estilos DOM e código da aplicação	URLs, slugs, nomes CSS, arquivos, configuração e texto CLI
Separador de palavras	Nenhum	Hífen (-)
Capitalização	Palavras internas capitalizadas	Normalmente tudo minúsculo
Identificador JavaScript	Sim	Não sem aspas
Fronteira web típica	Código da aplicação	URL / CSS / nome textual

Quando usar camelCase

camelCase gera identificadores válidos em JavaScript; background-color vira backgroundColor em APIs de style.

Quando usar kebab-case

kebab-case torna os limites explícitos e funciona bem em URLs, slugs, arquivos, CSS e configuração textual.

Matriz de decisão

Contexto	Convenção recomendada	Por quê
Identificadores JavaScript e propriedades de objeto	camelCase	Hífens não são válidos em identificadores JavaScript sem aspas; camelCase pode ser usado diretamente.
URLs, slugs e muitos nomes de arquivo	kebab-case	Hífens deixam os limites entre palavras legíveis sem depender de maiúsculas e minúsculas.
Propriedades CSS versus acesso style em JavaScript	kebab-case em CSS, camelCase em JavaScript	CSS usa nomes com hífens, enquanto APIs style do DOM e React expõem os nomes camelCase correspondentes.
Nomes de Custom Elements	Nome com hífen	Custom Elements exigem um hífen no nome, então uma forma parecida com kebab-case combina com a restrição da plataforma.

Qual estilo de nomenclatura escolher?

Use camelCase para identificadores JavaScript e kebab-case quando o nome externo exigir hífens; converta apenas nessa fronteira.

Erros comuns a evitar

Não converta automaticamente CSS custom properties como --brand-color para camelCase; o prefixo -- e o nome têm significado.
Não use kebab-case como nome de variável JavaScript sem aspas, pois o parser interpreta o hífen como subtração.
Não aplique automaticamente regras de URL ou arquivo a identificadores no código-fonte.

Converter entre estilos de nomenclatura

Cole um identificador para ver o formato alvo e os estilos compatíveis. A conversão roda localmente no navegador.

Preservar siglas

EntradaDetectado: snake_case

Saída kebab-case

user-profile-image-url

Todos os formatos de nomenclatura

camelCase

userProfileImageUrl

PascalCase

UserProfileImageUrl

snake_case

user_profile_image_url

kebab-case

user-profile-image-url

CONSTANT_CASE

USER_PROFILE_IMAGE_URL

dot.case

user.profile.image.url

path/case

user/profile/image/url

A conversão acontece localmente no navegador. Sua entrada não é enviada a um servidor de conversão.

Ferramentas e guias relacionados

Camel Case → Kebab Case Kebab Case → Camel Case Propriedade CSS → camelCase Kebab Case Converter Snake Case → Kebab Case Kebab Case → Snake Case