O Que É kebab-case? Uso em URLs e CSS
O kebab-case escreve todas as letras em minúscula e une as palavras com hifens (-), nome inspirado nos ingredientes espetados em um espeto de kebab.
As regras do kebab-case
user profile image vira user-profile-image em kebab-case. Ele também é chamado de spinal-case ou dash-case.
Ele difere do snake_case apenas por usar hifens em vez de sublinhados.
Onde é usado
- Caminhos de URL e slugs (ex.: /my-blog-post)
- Classes CSS e propriedades personalizadas (--main-color)
- Atributos de dados HTML (data-user-id)
- Nomes de arquivos e nomes de pacotes npm
Por que hifens em URLs e CSS
Em muitas linguagens de programação os sublinhados são permitidos em identificadores, mas os hifens são lidos como subtração e não podem ser usados em nomes. Por isso, os hifens acabaram se firmando em áreas fora do código, como URLs, CSS e nomes de arquivos.
Os mecanismos de busca tratam os hifens como separadores de palavras, enquanto os sublinhados às vezes não, então os hifens são recomendados em URLs.
Um cuidado
Os hifens não podem ser usados em identificadores de código, então o kebab-case não é usado para coisas como nomes de variáveis em JavaScript. Nesses casos, converta para camelCase.