Différentes cases : camel, pascal, snake, kebab et upper
snake_case, camelCase, PascalCase, kebab-case, UPPERCASE… Découvrons la syntaxe et le domaine d'utilisation des cases dans le développement web.
5 min
Quand on commence le développement web, et plus concrètement la programmation, il faut l’avouer, on vit des moments un peu folkloriques.
Les développeurs sont constamment confrontés à l’écriture de variables, fonctions, classes, propriétés… laConsole, la_console, LaConsole, la-console, LACONSOLE… Mais alors, quelle syntaxe choisir ?! 🤯 C’est ici qu’entre en jeu la notion de case.
Qu’est ce qu’une « case » en développement web ?
En développement, une « case » (en français « casse ») fait référence à la manière dont les noms des éléments de notre code (variables, fonctions, classes, etc.) sont écrits.
Les cases déterminent des conventions de nommage (= un ensemble de règles d’écritures) pour les caractères utilisés dans notre code source.
Ils définissent par exemple :
- Quand utiliser des lettres minuscules / majuscules
- Quel caractère séparateur utiliser pour une expression constituée de plusieurs mots
Il existe plusieurs cases couramment utilisées, comme la camelCase, la snake_case, la PascalCase, la kebab-case ou encore l’UPPERCASE.
Chacune de ces conventions ont pour but de rendre le code plus lisible et homogène pour les développeurs.
5 grandes familles de cases
🐫 camelCase
La camelCase est utilisée afin de distinguer visuellement les mots constituant un élément en faisant usage de majuscules sur la première lettre de chaque mot, sauf le premier. Visuellement, cela s’apparente aux bosses d’un chameau.
Exemples : student, getUsers()
👨🔬 PascalCase
La PascalCase est également utilisée afin de distinguer visuellement les mots constituant un élément en faisant usage de majuscules sur la première lettre de chaque mot, y compris le premier.
En ce sens, certains nomment cette case : UpperCamelCase.
Son nom vient du langage de programmation « Pascal », développé dans les années 1970 par Niklaus Wirth, pour lequel la syntaxe faisait usage de cette case.
Bien que cette théorie soit la plus répandue, une autre estime que son origine provient de Blaise Pascal, un mathématicien, physicien et inventeur français, qui a également contribué à la naissance de l’informatique en développant une machine à calculer appelée la Pascaline” en 1642.
Exemples : Product, AbstractManager
🐍 snake_case
La snake_case est utilisée afin de distinguer visuellement les mots constituant un élément en faisant usage de tirets du bas _ (« underscore ») en guise de séparateur.
Son nom vient de la ressemblance visuelle entre les underscores utilisés pour séparer les mots dans cette convention avec celle d’un serpent.
Exemples : active_page, show_errors(), legal_notice.html
🥙 kebab-case
La kebab-case est utilisée afin de distinguer visuellement les mots constituant un élément en faisant usage de tirets - en guise de séparateur.
Il n’y a pas de théorie ou d’origine clairement établie pour la kebab-case. Personnellement, j’y vois une ressemblance assez frappante entre les tirets et la broche du kebab… Mais ça c’est peut-être un biais cognitif dû à une consommation conséquente. 🤷♂️
Exemples : package-lock.json, dev-web-differentes-cases, btn-primary
🔠 UPPERCASE
L’UPPERCASE, consiste à écrire l’élément tout en majuscules.
Si un élément est constitué de plusieurs mots, alors on séparera les mots par des tirets du bas _ (« underscore »), à la manière d’une snake_case, mais en majuscule.
Exemples : PI, VITESSE_MAX
Les différentes cases en programmation : récapitulatif
Voici un tableau illustrant les différentes cases et leurs domaines d’utilisation respectifs :
| Nom de la case | Variables | Constantes | Fonctions | Classes | Fichiers | Slug d’URL |
|---|---|---|---|---|---|---|
| camelCase | ✅ | ❌ | ✅ | ❌ | ❌ | ❌ |
| PascalCase | ❌ | ❌ | ❌ | ✅ | ❌ | ❌ |
| snake_case | ✅ | ❌ | ✅ | ❌ | ✅ | ❌ |
| kebab-case | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ |
| UPPERCASE | ❌ | ✅ | ❌ | ❌ | ❌ | ❌ |
✅ Idéal ❌ Déconseillé
Ce tableau est donné à titre indicatif dans le but de vous guider dans le choix de la casse idéale pour votre développement web.
Notez toutefois que chaque système, entreprise, technologie ou langage peut dicter ses propres conventions de nommage pour les définitions de variables, fonctions, classes, nommer ses fichiers, etc.
Par exemple, en JavaScript, une constante peut être déclarée en camelCase, de la même manière que l’UPPERCASE est par habitude utilisée pour les fichiers bien particulier 📄 README.md.
Veillez donc à prendre connaissance des particularités de l’environnement dans lequel vous développez.