Qu'est-ce que le kebab-case ? Usage dans les URL et le CSS

Le kebab-case écrit chaque lettre en minuscule et relie les mots par des traits d'union (-), nommé d'après les ingrédients enfilés sur une brochette de kebab.

Les règles du kebab-case

user profile image devient user-profile-image en kebab-case. On l'appelle aussi spinal-case ou dash-case.

Il ne diffère du snake_case que par l'utilisation de traits d'union au lieu de traits de soulignement.

Où on l'utilise

• Chemins d'URL et slugs (par ex. /my-blog-post)
• Classes CSS et propriétés personnalisées (--main-color)
• Attributs de données HTML (data-user-id)
• Noms de fichiers et noms de paquets npm

Pourquoi des traits d'union dans les URL et le CSS

Dans de nombreux langages de programmation, les traits de soulignement sont autorisés dans les identifiants, mais les traits d'union sont interprétés comme une soustraction et ne peuvent pas être utilisés dans les noms. Les traits d'union se sont donc naturellement installés dans les domaines en dehors du code, comme les URL, le CSS et les noms de fichiers.

Les moteurs de recherche traitent les traits d'union comme des séparateurs de mots, alors que les traits de soulignement ne le sont pas toujours, c'est pourquoi les traits d'union sont recommandés dans les URL.

Une mise en garde

Les traits d'union ne peuvent pas être utilisés dans les identifiants de code, si bien que kebab-case ne sert pas pour des choses comme les noms de variables JavaScript. Dans ces cas-là, convertissez plutôt en camelCase.