camelCase x snake_case x kebab-case: qual usar e onde

camelCase x snake_case x kebab-case é, na maior parte, uma questão de onde o nome vive. JavaScript e Java usam camelCase (firstName), Python, Ruby e SQL usam snake_case (first_name), e CSS, atributos HTML e URLs usam kebab-case (first-name). Siga a convenção da linguagem e o guia de estilo da sua equipe. Para passar texto de um formato para outro, o Conversor de Maiúsculas e Minúsculas grátis e o Gerador de Slug de URL grátis fazem a maior parte do trabalho no seu navegador.

camelCase x snake_case x kebab-case num relance

Estilo	Exemplo	Onde você vai encontrar
camelCase	userFirstName	Variáveis e funções em JavaScript e TypeScript, métodos em Java, JSON de muitas APIs web
PascalCase	UserFirstName	Nomes de classes na maioria das linguagens, componentes React, métodos em C#
snake_case	user_first_name	Variáveis e funções em Python, Ruby, nomes de colunas SQL, muitas APIs JSON
SCREAMING_SNAKE_CASE	USER_FIRST_NAME	Constantes em muitas linguagens, variáveis de ambiente
kebab-case	user-first-name	Propriedades e nomes de classes CSS, atributos HTML, URLs, nomes de arquivos, opções de linha de comando

Os nomes vêm das formas: o camelCase tem corcovas de letras maiúsculas (camel é camelo em inglês), o snake_case se estende rente ao chão sobre sublinhados como uma cobra, e no kebab-case as palavras ficam espetadas em hifens como num espetinho.

Linguagem por linguagem

JavaScript e TypeScript. Variáveis e funções são camelCase (getUserName), classes e componentes React são PascalCase (UserCard), e as constantes muitas vezes são SCREAMING_SNAKE_CASE (MAX_RETRIES). Os recursos nativos da própria linguagem seguem isso, como getElementById e toLowerCase.

Python. O PEP 8, o guia de estilo do Python, usa snake_case para funções, variáveis e nomes de módulos, CapWords (PascalCase) para classes e maiúsculas com sublinhados para constantes. Escrever getUserName em Python funciona, mas vai parecer fora de lugar para qualquer desenvolvedor Python que ler.

CSS e HTML. As propriedades CSS são kebab-case (background-color, font-size), e a maioria dos sistemas de nomes de classes segue o mesmo caminho (.nav-item, .card-title). Os atributos data- do HTML também são kebab-case, e os navegadores os convertem para o JavaScript: data-user-id vira element.dataset.userId. Essa única linha resume bem por que as duas convenções existem.

SQL e bancos de dados. Nomes de colunas e tabelas costumam ser snake_case (created_at, order_items). Muitos bancos de dados convertem nomes sem aspas para um só formato de letra, então createdAt pode virar silenciosamente createdat, a menos que você use aspas toda vez. O snake_case evita isso.

URLs e nomes de arquivos. Use kebab-case. A orientação do Google sobre estrutura de URLs recomenda hifens em vez de sublinhados para separar palavras, porque os hifens marcam claramente onde cada palavra termina. Usar minúsculas também evita links quebrados em servidores que tratam About.html e about.html como arquivos diferentes. Veja o que é um slug de URL e as nossas boas práticas de slug de URL.

JSON e APIs. Não há uma regra única. Muitas APIs centradas em JavaScript usam camelCase, e muitos back-ends em Python ou Ruby devolvem snake_case. Escolha um por API e nunca misture os dois na mesma resposta.

Qual é o mais fácil de ler?

Os três são legíveis depois que você se acostuma. Algumas diferenças práticas:

• snake_case e kebab-case mantêm uma separação clara entre as palavras, o que ajuda com nomes longos e siglas (html_parser x htmlParser x HTMLParser).
• camelCase é mais curto e não precisa de caracteres extras.
• kebab-case não pode ser usado em nomes de variáveis na maioria das linguagens, porque user-name é lido como user menos name.
• Clicar duas vezes seleciona um nome inteiro em snake_case ou camelCase na maioria dos editores, mas geralmente para nos hifens do kebab-case.

A regra real é a consistência. Um arquivo que mistura userName, user_name e UserName é mais difícil de ler do que qualquer um dos estilos usado em todo lugar.

Como converter entre os formatos

Você vai precisar converter ao mover dados entre camadas: o created_at de uma API em Python virando createdAt em JavaScript, o título de uma página virando uma URL ou o nome de uma configuração virando uma variável de ambiente.

Para kebab-case ou snake_case: use o gerador de slug. Cole as palavras, um nome por linha, e escolha Hífens (-) para kebab-case ou Sublinhados (_) para snake_case. Ele passa tudo para minúsculas, troca letras acentuadas por letras simples e remove símbolos. Ele trata qualquer símbolo como separação de palavras, então user_first_name vira user-first-name e vice-versa. Mas ele não separa camelCase: userFirstName sai como userfirstname. Coloque espaços entre as palavras antes.

Para SCREAMING_SNAKE_CASE. Faça a versão snake_case no gerador de slug, depois cole no Conversor de Maiúsculas e Minúsculas grátis e clique em MAIÚSCULAS. No sentido inverso, minúsculas transforma MAX_RETRIES em max_retries.

Para camelCase ou PascalCase. Não existe um botão de um clique. O caminho mais rápido: digite as palavras com espaços, clique em Cada Palavra Em Maiúscula no conversor (user first name vira User First Name), depois apague os espaços para ter PascalCase e passe a primeira letra para minúscula para ter camelCase.

Muitos nomes de uma vez, dentro do código. Para uma renomeação grande, use o localizar e substituir do seu editor com uma expressão regular. Teste o padrão antes no Testador de Regex grátis: por exemplo, _([a-z]) encontra cada sublinhado seguido de uma letra, o ponto em que o snake_case precisaria de uma maiúscula no camelCase. Muitos editores conseguem passar a letra capturada para maiúscula na substituição; consulte a documentação do seu editor para ver a sintaxe.

O que observar ao converter

• Siglas. Decida se é userId ou userID, HtmlParser ou HTMLParser, e mantenha a escolha.
• Números. address_line_2 converte sem problema; addressLine2 está ótimo; só não perca o dígito.
• Nomes públicos. Renomear um campo JSON ou uma URL quebra quem os usa. Adicione um redirecionamento para URLs e mantenha os nomes antigos de campos funcionando por um tempo nas APIs.

Converta o seu texto

Use o Conversor de Maiúsculas e Minúsculas grátis para MAIÚSCULAS, minúsculas e Cada Palavra Em Maiúscula, e o gerador de slug para kebab-case e snake_case. Os dois rodam no seu navegador, e nada do que você cola sai do seu dispositivo.