Guidelines pour CSS — Nomenclature des classes
Il existe différentes nomenclatures pour s’y retrouver dans son CSS. Certaines sont totalement compatibles avec BEM.
Préfixes
L’une de ces nomenclatures propose d’ajouter un préfixe (souvent limité à une voire deux lettres) avant chaque classe « utilitaire ».
Exemples
| Type | Classe | Exemple |
|---|---|---|
| Typographique | t- |
t-title |
| Helpers | h- |
h-align-right |
| État | is- |
is-hidden |
| Possession d’attributs | has- |
has-submenu |
| Classe dédiée à Javascript | js- |
js-slider |
Ces préfixes peuvent parfaitement coïncider avec la méthodologie ITCSS.
Chaînage de modifiers
Par défaut, la syntaxe de BEM peut se révéler lourde à l’écriture si on cummule plusieurs modifiers. L’idée consiste à faire varier BEM vers ce qui pourrait être BEVM :
block-name[__element-name][--variation-name] -modifier
<input class="input input--full-width input--string">
Il existe des nomenclatures plus pratiques pour leur nommage (et en plus, compatible avec le nesting des préprocesseurs :
<input class="input -full-width -string">
Ce qui se traduirait dans un préprocesseur comme suit :
.input {
&.-full-width { }
&.-string { }
}
Ce qui permet de garder un CSS propre tout en exploitant la puissance du nesting.