Guide des conventions de nommage

camelCase vs kebab-case

camelCase retire les séparateurs et marque les mots par des majuscules ; kebab-case relie des mots minuscules par des tirets. Ils coexistent souvent dans un même projet web.

Par Équipe éditoriale Camel Case ConverterPublié le 12 sept. 2026Dernière relecture 13 sept. 2026

Comparaison rapide

Différence	camelCase	kebab-case
Exemple	backgroundColor	background-color
Usage courant	Identifiants JavaScript, propriétés d’objet, styles DOM et code applicatif	URL, slugs, noms CSS, fichiers, configuration et texte CLI
Séparateur de mots	Aucun	Tiret (-)
Capitalisation	Mots internes capitalisés	Généralement tout en minuscules
Identifiant JavaScript	Oui	Non sans guillemets
Frontière web typique	Code applicatif	URL / CSS / nom texte

Quand utiliser camelCase

camelCase produit des identifiants directement utilisables en JavaScript ; background-color devient backgroundColor dans les APIs de style.

Quand utiliser kebab-case

kebab-case rend les limites explicites et convient aux URL, slugs, fichiers, CSS et configuration textuelle.

Matrice de décision

Contexte	Convention recommandée	Pourquoi
Identifiants JavaScript et propriétés d’objet	camelCase	Les tirets ne sont pas valides dans un identifiant JavaScript non cité, alors que camelCase peut être utilisé directement.
URL, slugs et de nombreux noms de fichiers	kebab-case	Les tirets rendent les frontières de mots lisibles sans dépendre de la casse.
Propriétés CSS et accès style en JavaScript	kebab-case en CSS, camelCase en JavaScript	CSS utilise des noms avec tirets, tandis que les API style du DOM et de React exposent les noms camelCase correspondants.
Noms de Custom Elements	Nom avec tiret	Les noms de Custom Elements exigent un tiret ; une forme proche de kebab-case respecte cette contrainte de plateforme.

Quel style de nommage choisir ?

Utilisez camelCase pour les identifiants JavaScript et kebab-case lorsqu’un nom externe avec tirets est attendu ; convertissez uniquement à cette frontière.

Erreurs fréquentes à éviter

Ne transformez pas aveuglément les custom properties CSS comme --brand-color en camelCase : le préfixe -- et le nom sont sémantiques.
N’utilisez pas kebab-case comme variable JavaScript non citée : le parseur interprète le tiret comme une soustraction.
N’appliquez pas automatiquement les règles de nommage d’URL ou de fichiers aux identifiants du code source.

Convertir entre conventions

Collez un identifiant pour voir le format cible et les autres conventions prises en charge. La conversion s’effectue dans votre navigateur.

Conserver les acronymes

EntréeDétecté : snake_case

Sortie kebab-case

user-profile-image-url

Tous les formats de nommage

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

La conversion s’effectue localement dans votre navigateur. Votre entrée n’est pas envoyée à un serveur de conversion.

Outils et guides associés

Camel Case → Kebab Case Kebab Case → Camel Case Propriété CSS → camelCase Kebab Case Converter Snake Case → Kebab Case Kebab Case → Snake Case