La notation BEM ou comment structurer le CSS

Au moment où nous débutons cet article, le site de PIC Digital est constitué d’environ 10 000 à 20 000 lignes de CSS, comme tant d’autres. Pour développer efficacement au milieu d’un si grand volume de code, un minimum de structure et d’organisation est nécessaire. Mais que propose le CSS à ce niveau-là ?

Un langage très permissif

Contrairement à beaucoup d’autres langages de programmation, le CSS est très permissif quant à sa structure : tant que la syntaxe est juste, nous pouvons l’écrire comme on veut. C’est la grande force, mais aussi la faiblesse du CSS, soit de laisser à son auteur une très grande liberté d’organisation. Le résultat, suivant la rigueur du ou des développeur(s), peut donc être très clair ou extrêmement chaotique.

Le code HTML de l’article que vous êtes en train de lire pourrait ressembler à l’exemple simpliste ci-dessous : 

<article class="article"> 	<h1 class="title big-title">La notation BEM [...]</h1> 	<div class="article-content white-background"> 		<p>Au moment où [...]</p> 		[...] 	</div> </article>

À première vue, la classe .big-title doit sans doute augmenter la taille de la police du titre de l’article, et la classe .white-background doit donner un fond blanc à son corps. Mais quid du lien entre ces classes et les éléments auxquels elles sont appliquées ? La classe .big-title peut-elle fonctionner avec un autre élément qu’un titre d’article ? De même, la classe .title peut-elle être employée hors d’un élément de la classe .article ?

Une notation pour tout structurer

Il aurait été possible de répondre à ce type de question d’une seule lecture si ces classes suivaient la notation BEM : Block, Element, Modifier.

L’idée ici est de voir le code non plus comme une page, mais plutôt comme un ensemble de composants plus ou moins autonomes et réutilisables qui viennent la construire (les composants header, menu, article, etc.). Ces composants sont donc les Blocks, la partie la plus haute. 

Ces Blocks peuvent être eux-mêmes constitués d’autres parties, les Elements (l’élément logo du Block header, l’élément link du Block menu, etc.). 

Enfin, il peut exister pour ces Blocks ou ces Elements des variations de leur apparence : les Modifiers (le Modifier active pour l’élément link du Block menu, etc.).

BEM propose plusieurs notations basées sur les classes pour son concept, en fonction des besoins et préférences. Nous n’en montrerons qu’une ici, celle qui nous a paru la plus claire :

.block {} .block__element {} .block--modifier {} .block__element--modifier {}

Trois principes s’articulent ici :

  • Commencer le nom de la classe par le nom du Block parent
  • Précéder directement le nom d’un Element par deux underscores
  • Précéder directement le nom d’un Modifier par deux tirets

Reprenons ces principes sur l’exemple précédent :

<article class="article"> 	<h1 class="article__title article__title--big">La notation BEM [...]</h1> 	<div class="article__content article__content--white-background"> 		<p>Au moment où [...]</p> 		[...] 	</div> </article>

Avec la notation BEM, les interrogations précédentes trouvent leurs réponses à la lecture du nom des classes, car ils sont suffisamment explicites pour nous présenter ces spécificités ; on dit alors que le code s’auto-documente. 

On en parle ? Contactez PIC DIGITAL au 0970408864