nomenclatures.md

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.