Conventions de nommage CSS : BEM, OOCSS, SMACSS comparés
Nommer les classes CSS peut sembler anodin, mais dans les grandes bases de code, c'est l'une des décisions architecturales les plus importantes. Une bonne convention de nommage prévient les guerres de spécificité, réduit les collisions de noms et rend les feuilles de style auto-documentées.
Pourquoi le nommage CSS est important
CSS possède un espace de noms global. Chaque nom de classe est disponible partout, et les règles de spécificité déterminent quels styles l'emportent. Sans convention de nommage, les équipes créent inévitablement des conflits : deux développeurs nomment tous deux leur classe .card, et l'un écrase l'autre.
BEM (Block Element Modifier)
BEM est la convention de nommage CSS la plus largement adoptée. Elle utilise un motif structuré :
.block {}
.block__element {}
.block--modifier {}
/* Exemple */
.card {}
.card__title {}
.card__image {}
.card--featured {}
.card__title--large {}Règles BEM
- Bloc : Un composant autonome. Nommé en kebab-case :
.search-form,.nav-bar. - Élément : Une partie d'un bloc sans signification autonome. Séparateur double underscore :
.search-form__input. - Modificateur : Une variante ou un état d'un bloc/élément. Séparateur double tiret :
.search-form--dark.
Avantages de BEM
- Auto-documenté :
.card__title--highlightedindique exactement ce que c'est - Faible spécificité : tout est un sélecteur de classe simple
- Pas de collision de noms : le nom du bloc délimite tout
- Agnostique de framework : fonctionne avec n'importe quel stack technique
OOCSS (CSS Orienté Objet)
OOCSS sépare la structure de l'apparence et le conteneur du contenu :
/* Structure */
.media { display: flex; align-items: start; }
.media__body { flex: 1; }
/* Apparence */
.theme-dark { background: #333; color: #fff; }
.theme-light { background: #fff; color: #333; }OOCSS crée des objets utilitaires hautement réutilisables, mais peut entraîner de nombreuses classes sur un seul élément HTML.
SMACSS (Architecture Évolutive et Modulaire)
SMACSS catégorise les règles CSS en cinq types avec des préfixes :
| Catégorie | Préfixe | Exemple |
|---|---|---|
| Base | aucun | html, body, h1 |
| Layout | l- | .l-sidebar |
| Module | aucun | .card |
| État | is- | .is-active |
| Thème | t- | .t-dark |
CSS Modules et CSS-in-JS
Les frameworks modernes comme React offrent des alternatives qui résolvent les collisions de noms au niveau des outils :
- CSS Modules : Délimite automatiquement les noms de classe. Vous écrivez
.title, l'outil de build produit.Card_title_x7kd2. Utilisez camelCase car ils deviennent des propriétés JavaScript. - Tailwind CSS : Utilise des classes utilitaires, éliminant entièrement le nommage personnalisé.
- styled-components / Emotion : CSS-in-JS avec des noms de classe auto-générés.
Lequel choisir ?
| Approche | Idéal pour |
|---|---|
| BEM | CSS traditionnel, équipes multi-développeurs, thèmes CMS |
| CSS Modules | Projets à composants React/Vue/Svelte |
| Tailwind | Prototypage rapide, workflows utility-first |
| SMACSS | Grandes bases de code legacy nécessitant une organisation |
Convertissez vos noms de classe
Les classes CSS utilisent toujours kebab-case. Convertissez depuis d'autres formats avec notre convertisseur kebab-case. Si vous avez besoin de camelCase pour CSS Modules, essayez le convertisseur camelCase ou le hub de conversion de casse.