CSS : la méthodologie BEM CSS : la méthodologie BEM

CSS : la méthodologie BEM

par ,
le 26 janvier 2017

0
0

Pendant longtemps, le CSS a été réputé pour être un langage difficile à maintenir, où la moindre modification pouvait être critique et où tout le monde faisait un peu à sa sauce.
Partant de ce postulat, des méthodologies ont été pensées afin de rendre plus lisibles et maintenables les feuilles de style d’un site web. OCSS en est une, BEM en est une autre. Chacune de ces méthodologies a ses avantages et ses inconvénients et chez altima°, nous avons décidé de choisir la méthodologie BEM, pour « Block Element Modifier », qui correspond mieux à la philosophie de développement que nous souhaitons adopter : une philosophie modulaire.
A une époque pas si lointaine, il était courant de voir ce type de code CSS :

#css
#header .nav {
max-width: 90rem;
margin: 0 auto;
}
#header .nav li {
display: inline-block;
width: 20%;
}
#header .nav li a {
color: #000;
text-decoration: none;
}

 

Le problème de ce type de code est multiple :

  • Difficilement réutilisable (id unique)
  • Difficilement modifiable (cascade trop profonde)
  • Trop dépendant de la structure HTML
  • Peu lisible
  • Moins performant (painting plus rapide si le sélecteur CSS est simple)

La méthodologie BEM permet de faire en sorte que ces problèmes soient en principe résolus en se basant uniquement sur des classes CSS en évitant au maximum l’imbrication (nesting) de celles-ci.

Mais avant de voir exactement ce que notre exemple donnerait en BEM, faisons une parenthèse pour parler de la syntaxe.
Ce qu’il faut savoir, c’est qu’il existe une recommandation officielle disponible sur le site en.bem.info
Pour autant, pour moi, BEM est plus une philosophie qu’une méthodologie avec une syntaxe figée. C’est ainsi que différentes déclinaisons de la syntaxe ont pu être proposées et utilisées pour des raisons de préférence en terme de lisibilité essentiellement.

Chez altima°, on a ainsi fait le choix des syntaxes suivantes :

#css
.Block
.Block--theModifier
.Block-theElement
.Block-theElement--theModifier

 

Décryptons cette syntaxe :

Le Block commence systématiquement par une majuscule, ce qui rappelle la syntaxe adoptée pour les classes en programmation objet.
Le tiret est utilisé pour l’élément et les double tirets sont utilisés pour ajouter le modifier. On notera également que l’on utilise du CamelCase dans le cas où l’on aurait besoin de mettre plusieurs mots dans un Block, un element ou un modifier.

On s’éloigne ainsi un peu de la recommandation (on utilise le tiret au lieu des underscores pour les éléments), mais on allège ainsi un peu la syntaxe.
A noter que l’on utilise également un préfixe (de 2 ou 3 lettres maximum) devant le nom de la classe afin de créer une sorte de namespace pour éviter que des conflits puissent apparaître avec des ressources externes qui sont souvent difficilement maîtrisables.

Concrètement, voici ce que donnerait notre exemple plus haut réécrit en s’appuyant sur notre méthodologie :

#css
.pre-Nav {
max-width: 90rem;
margin: 0 auto;
}
.pre-Nav-item {
display: inline-block;
width: 20%;
}
.pre-Nav-link {
text-decoration: none; 
color: #000;
}

 

On comprend clairement ici qu’il s’agit d’un item et d’un lien (elements) se trouvant dans mon composant Nav (Block) et dans le namespace « pre ».

Admettons maintenant que l’on souhaite modifier le style pour un seul lien (par exemple un état actif). On ajoutera une nouvelle classe de type « modifier » sur ce lien :

#css
.pre-Nav-link--active {
font-weight: bold;
}

 

En lisant la feuille de style, on comprend ainsi tout de suite de quoi il s’agit et la maintenabilité s’en retrouve grandement facilitée. Et on n’est plus dépendant des balises HTML.

Et si on couple cette méthodologie à un préprocesseur tel que SASS ou LESS, on obtient ainsi une approche modulaire totale en ce qui concerne l’habillage des sites internet que l’on conçoit chez altima°, mais ceci est une autre histoire que l’on pourra voir dans un prochain article. 😉

mots-clés :

, ,

articles à lire ensuite...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

0
0

CSS : la méthodologie BEM