Le kebab-case est une convention de nommage en développement web qui consiste à écrire tous les mots en minuscules, séparés par des tirets (-), sans espace ni majuscule. Exemple : background-color, font-size, mon-identifiant.
Le nom vient de l’image des mots « embrochés » sur un tiret, comme des morceaux sur une broche de kebab. C’est l’une des 4 grandes conventions de nommage utilisées en développement web, aux côtés du camelCase, du PascalCase et du snake_case.
kebab-case vs camelCase vs PascalCase vs snake_case
| Convention | Exemple | Règle | Langages / contextes principaux |
|---|---|---|---|
| kebab-case | mon-identifiant | Tout en minuscules, mots séparés par des tirets | CSS, HTML (classes, IDs, data-*), URLs, noms de fichiers web, Vue.js composants |
| camelCase | monIdentifiant | Premier mot en minuscule, majuscule initiale pour les suivants | JavaScript, TypeScript, Java, Kotlin — variables et fonctions |
| PascalCase | MonIdentifiant | Tous les mots commencent par une majuscule | Classes, composants React, TypeScript types, C# |
| snake_case | mon_identifiant | Tout en minuscules, mots séparés par des underscores | Python, Ruby, SQL, PHP, noms de fichiers backend |
| SCREAMING_SNAKE_CASE | MON_IDENTIFIANT | Tout en majuscules, underscores comme séparateurs | Constantes en Java, C, Python |
La règle pratique dans un projet web typique : kebab-case pour CSS et URLs, camelCase pour JavaScript, snake_case pour le backend Python/PHP, PascalCase pour les classes et composants.
Exemples de kebab-case par contexte
En CSS — convention universelle
Toutes les propriétés natives CSS sont en kebab-case sans exception. C’est la convention imposée par le langage lui-même :
/* Propriétés CSS natives */
background-color: #43c0bf;
font-size: 16px;
border-radius: 8px;
max-width: 1200px;
flex-direction: row;
/* Classes CSS personnalisées — bonne pratique */
.btn-primary { }
.nav-menu { }
.hero-section { }
.product-card-wrapper { }
.cta-block-dark { }En HTML — attributs et données
Le kebab-case est la convention recommandée pour les classes, IDs et attributs data-* :
<button class="btn-primary" id="submit-form" data-user-id="42">
Envoyer
</button>
<section class="hero-section" data-animation-delay="200"></section>
<nav class="main-navigation" aria-label="menu-principal"></nav>Dans les URLs — recommandation Google officielle
Google recommande officiellement le kebab-case pour les URLs. Les tirets sont reconnus comme séparateurs de mots par les moteurs de recherche ; les underscores, eux, sont traités comme des caractères collés aux mots adjacents (agence_seo est lu comme un seul mot ; agence-seo est lu comme deux mots distincts) :
/* ✅ Bonne pratique SEO — kebab-case */
Agence SEO Belgique
kebab-case
https://m-twice.com/blog/creation-contenu-seo/
/* ❌ À éviter */
https://m-twice.com/expertises/agenceSEO/ /* camelCase dans URL */
https://m-twice.com/expertises/agence_seo/ /* snake_case dans URL */
https://m-twice.com/expertises/AgenceSEO/ /* PascalCase dans URL */Dans les frameworks JavaScript — noms de composants
Vue.js recommande le kebab-case pour les noms de composants utilisés dans les templates HTML (même si les fichiers .vue et les importations JavaScript utilisent le PascalCase) :
<!-- Vue.js — kebab-case dans les templates -->
<mon-composant />
<nav-bar />
<product-card :item="product" />
<!-- Équivalent PascalCase dans l'import JS -->
import MonComposant from './MonComposant.vue'Noms de fichiers et dossiers web
Le kebab-case est la convention recommandée pour les noms de fichiers CSS, les assets et les dossiers dans un projet web — lisible, compatible avec tous les systèmes de fichiers, et SEO-friendly pour les fichiers images indexés :
/* Fichiers CSS */
styles/main-styles.css
styles/components/product-card.css
styles/layouts/grid-system.css
/* Images */
images/hero-banner-desktop.webp
images/product-photo-main.jpg
/* Dossiers */
components/nav-bar/
components/product-card/Pourquoi le kebab-case est la convention SEO pour les URLs
L’utilisation du kebab-case dans les URLs n’est pas qu’une convention esthétique — c’est une recommandation officielle de Google avec des implications SEO directes :
- Lisibilité humaine — une URL comme
/agence-creation-contenu/est immédiatement compréhensible, ce qui améliore le CTR dans la SERP - Segmentation des mots — Google interprète le tiret comme un séparateur de mots.
agence-seo= deux mots distincts « agence » et « seo ». L’underscore (agence_seo) est traité comme un seul token - Compatibilité universelle — le kebab-case ne crée aucun problème d’encodage dans les URLs, contrairement aux espaces (%20) ou aux caractères spéciaux
- Canonicalisation — les URLs en kebab-case minuscules évitent les problèmes de contenu dupliqué liés aux variantes de casse
Pour les sites e-commerce et les sites de services, chaque URL de catégorie, de page produit et d’article de blog devrait systématiquement utiliser le kebab-case — c’est une bonne pratique de SEO technique non négociable.
Limite du kebab-case : incompatible avec JavaScript
Le kebab-case ne peut pas être utilisé comme nom de variable ou de fonction en JavaScript (et dans la plupart des langages de programmation) car le tiret est interprété comme un opérateur de soustraction :
// ❌ ERREUR JavaScript — le tiret = opérateur de soustraction
let mon-identifiant = "valeur"; // SyntaxError
function calculer-prix() { } // SyntaxError
// ✅ CORRECT — camelCase en JavaScript
let monIdentifiant = "valeur";
function calculerPrix() { }C’est la raison principale pour laquelle JavaScript utilise le camelCase pour les variables et fonctions, même si le même projet utilise le kebab-case pour ses classes CSS et ses URLs.
kebab-case dans les autres langages
Au-delà du web, le kebab-case est utilisé dans quelques autres contextes :
- Lisp et Clojure — le kebab-case est la convention standard pour les noms de fonctions et variables dans ces langages :
(def mon-identifiant 42),(defn calculer-prix [ht tva] ...) - Ruby on Rails — certaines conventions Rails utilisent le kebab-case pour les noms de routes et les classes CSS générées
- YAML et config files — de nombreux fichiers de configuration (Docker Compose, Kubernetes, GitHub Actions) utilisent le kebab-case pour les clés :
max-replicas,run-as-user - Variables CSS custom properties — les propriétés CSS personnalisées (variables CSS) utilisent le kebab-case avec le préfixe
--:--color-primary,--font-size-base
Votre site respecte-t-il les bonnes pratiques de nommage pour le SEO ?
Les conventions de nommage CSS, les structures d’URLs et l’architecture technique d’un site impactent directement son référencement naturel. Nos experts auditent votre SEO technique et vous livrent un plan d’action priorisé.
FAQ — kebab-case
Qu’est-ce que le kebab-case ?
Le kebab-case est une convention de nommage qui consiste à écrire tous les mots en minuscules, séparés par des tirets (-), sans espace ni majuscule. Exemple : background-color, font-size, mon-identifiant. C’est la convention standard en CSS (toutes les propriétés natives l’utilisent), dans les URLs web (recommandé par Google) et pour les attributs HTML comme les data-*.
Quelle différence entre kebab-case et snake_case ?
Les deux séparent les mots en minuscules, mais avec des séparateurs différents : kebab-case utilise des tirets (mon-identifiant) et snake_case utilise des underscores (mon_identifiant). Le kebab-case est la convention des langages web front-end (CSS, HTML, URLs) ; le snake_case est la convention des langages back-end (Python, Ruby, SQL). En SEO, les tirets sont préférables aux underscores dans les URLs car Google les reconnaît comme séparateurs de mots.
Peut-on utiliser le kebab-case en JavaScript ?
Non — le tiret est un opérateur de soustraction en JavaScript. let mon-identifiant = ... provoque une SyntaxError car le moteur JavaScript interprète cela comme let mon moins identifiant. Pour les variables et fonctions JavaScript, on utilise le camelCase (monIdentifiant). En revanche, le kebab-case est utilisé en JavaScript pour les noms de classes CSS manipulées via le DOM : element.classList.add('btn-primary').
Pourquoi Google recommande-t-il le kebab-case pour les URLs ?
Google interprète les tirets comme des séparateurs de mots dans les URLs. Ainsi, /agence-seo/ est lu comme deux mots distincts « agence » et « seo », ce qui améliore la pertinence de la page pour ces requêtes. Les underscores (/agence_seo/) sont traités comme des caractères collés aux mots adjacents — Google voit un seul token « agence_seo » au lieu de deux mots. Les URLs en kebab-case minuscules sont aussi plus lisibles pour les utilisateurs, ce qui améliore le CTR dans la SERP.
Pour aller plus loin
- lowerCamelCase — la convention JavaScript pour les variables et fonctions
- PascalCase — la convention pour les classes et composants
- SEO technique — les URLs en kebab-case comme bonne pratique SEO
- Données structurées — les propriétés JSON-LD utilisent le camelCase, pas le kebab-case
- Notre expertise SEO — audit technique et optimisation des URLs pour améliorer le référencement
