Soyons honnêtes, vous passerez plus de temps à lire votre code qu’à l’écrire. Que ce soit parcourir votre code à la recherche d’un élément à modifier, ou juste pour vous rappeler comment fonctionne tel ou tel élément. D’où l’importance de bien nommer vos sélecteurs.
Si je nomme ma classe .btn , c’est assez évident que c’est un bouton, non ?
Totalement, mais d’ici quelques mois, est-ce que vous serez en mesure de dire de quel bouton il s’agit ? Est-ce que ce bouton fait partie d’un formulaire ? Ou d’une barre de navigation ? Ou même d’une page qui a été supprimée en HTML et dont on aurait oublié de supprimer le CSS ?
Tout peut arriver, mais tout ira bien, il nous suffit d’anticiper !
Découvrez BEM
Si je vous dis Canarticho. Sans connaître Pokémon, vous pouvez vous douter qu’on parle potentiellement d’un canard, et d’un artichaut : le nom en évoque l’apparence ou le pouvoir. C’est la même chose pour notre HTML.
Comme pour les pokémons, l’idéal serait qu’en un simple coup d'œil au nom d’une classe, on comprenne son usage et comment celle-ci interagit avec d’autres éléments.
En jetant un œil à cette page web, sans même lire le texte, on comprend qu’il y a une barre de navigation, une présentation et un portfolio. Et si je vous dis qu’il est possible de maintenir cette structure tout en l’appliquant dans votre HTML ?
Laissez-moi vous présenter BEM, une convention qui va nous aider à rendre nos classes plus compréhensibles, et ce grâce au nommage.
Le nommage vient du terme naming en anglais, qui est le fait d’identifier une caractéristique en lui attribuant un nom. Lorsque vous voyez un grand nombre d’arbres, vous appelez ça une forêt. C’est du naming !
BEM est l’acronyme de Bloc Element Modificator. L’idée est qu’en assignant chaque sélecteur que vous écrivez à l’une de ces trois catégories, vous serez en mesure de définir sa fonctionnalité et ses relations. Pas mal, non ? Mais que sont au juste les blocs, éléments et modificateurs ?
Préparez des blocs
Commençons avec le B de BEM. : Block (ou bloc, en FR). Un bloc est un composant, ou une section d’une page qui est autonome et peut fonctionner indépendamment du reste de la page. Cela peut être un header, un footer, un conteneur, un menu ou même un bouton. L’idée est que vous pourriez supprimer tout ce qu’il y a autour de votre bloc, et toujours comprendre de quoi il s’agit.
Pour illustrer, nous allons prendre comme exemple notre header, et plus précisément notre barre de navigation.
Qu'observez-vous ? Notre header contient un logo, une barre de navigation. Notre barre de navigation contient plusieurs liens.
On nomme un bloc en décrivant sa fonction. Nommons notre bloc pour notre barre de navigation .navbar (navbar pour “barre de navigation”, en français), en y assignant uniquement les règles qui sont spécifiques à ce bloc.
<nav class="navbar">
<!-- Notre barre de navigation -->
</nav>.navbar {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}Nous avons utilisé le sélecteur .navbar pour définir la structure de notre bloc : les éléments seront alignés les uns après les autres, ils seront centrés, avec un espace entre deux éléments et le texte de fond est blanc.
Peu importe ce que vous ajoutez dans votre barre de navigation, les éléments seront tous alignés les uns après les autres, centrés avec un espace entre eux.
Si on prend un peu de recul, on obtient un bout de code réutilisable, ce qui nous permet d’avoir une codebase bien ordonnée, tout en assurant une certaine cohérence graphique et qui, bonus, suit le principe DRY : PARFAIT !
Ajoutez des éléments
Passons au E de BEM: Element (ou élément, en français). Un bloc contient des éléments. Dans notre cas, si notre barre de navigation est un bloc, nos éléments seront… les liens et le logo !
Pour mieux les identifier, il nous faut leur donner un nom. Le nom d’un élément doit indiquer deux choses :
son bloc parent, suivi d’un double underscore (aussi appelé “dunders”) : ici
.navbar__;la fonction de l’élément : ici un lien, ou link, en anglais :
.navbar__link.
Ce qui nous donne : .navbar__link pour les liens et .navbar__logo pour notre logo.
Chaque lien ou élément sera défini ainsi :
.navbar__link {
margin-left: 30px;
color: #242424;
text-decoration: none;
}Après le CSS, il nous faut ajouter cette nouvelle classe à nos éléments, donc nos liens :
<nav class="navbar>
<a class="navbar__link" href="index.html">Accueil</a>
<a class="navbar__link" href="a-propos.html">À propos</a>
<a class="navbar__link" href="portfolio.html">Portfolio</a>
</nav>Nous avons notre bloc .navbar qui contient des éléments .navbar__link . Imaginons que vous vouliez faire en sorte que le lien Accueil soit plus voyant, et d’une couleur différente :
Comment faire pour modifier nos liens et appliquer ce changement de style ? Vous avez dit Modifier ? C’est ce qu’il nous faut, passons à présent aux modificateurs !
Peaufinez avec des modificateurs
Le M de BEM signifie Modifier (ou modificateur, en FR). Les modificateurs changent l’apparence d’un bloc mais aussi d’un élément. Voyez-les comme des sélecteurs qui créent différentes versions d’un bloc ou d’un élément. Besoin de changer la taille, la couleur, la police, etc., d’un élément, tout en le gardant tel quel ? C’est un modificateur qu’il vous faut !
Dans notre cas, nous aimerions que le lien vers l’accueil soit violet. Pour cela, vous allez créer un modificateur pour vos éléments .navbar__link .
Pour nommer le modificateur, vous devez :
préciser le bloc (ou l’élément) qu’il modifie : ici
.navbar__link;y ajouter deux tirets suivis du style graphique de votre modificateur : ici
.navbar__link--purple.
.navbar__link--purple {
color: #a5b4fc;
}Et l’appliquer à votre HTML et le tour est joué !
<nav class="navbar">
<a class="navbar__link navbar__link--purple" href="index.html">Accueil</a>
<a class="navbar__link" href="a-propos.html">À propos</a>
<a class="navbar__link" href="portfolio.html">Portfolio</a>
</nav>Si on reprend tout le code CSS que vous venez de créer, cela nous donne :
.navbar {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.navbar__link {
margin-left: 30px;
color: #242424;
text-decoration: none;
}
.navbar__link--purple {
color: #a5b4fc;
}Si un jour, quelqu’un venait à reprendre votre code et apporter des modifications à cette barre de navigation, cette personne comprendrait en un rien de temps la fonction de chacun de ces sélecteurs. Il est clair que votre code est plus organisé et compréhensible.
Mais pourquoi ? 🤔
Vous devez être sûr que vos sélecteurs ont une spécificité aussi basse que possible. Souvenez-vous des règles de priorité, notamment le fait qu’un id l’emportera toujours sur une classe.
Le but d’un modificateur est d’introduire une règle contradictoire et que celle-ci annule la règle originelle ; c’est pourquoi on utilise toujours des classes pour implémenter des sélecteurs BEM !
Dans notre exemple : notre modificateur changeait la couleur de notre lien en violet pour contrer la couleur originelle.
À vous de jouer !
Mettez en pratique BEM et travaillez sur l’introduction du site de Robbie Lens dans ce CodePen.
Vérifiez vos réponses avec la correction dans ce CodePen.
En résumé
Quand vous construisez vos pages, imaginez que vous empilez des boîtes dans des boîtes en les dessinant, ça vous aidera à mieux visualiser votre structure HTML et prévoir votre structure avec BEM.
BEM signifie bloc, élément, modificateur :
les blocs sont des bouts de code autonomes ;
les éléments sont les parties qui forment le bloc ;
les modificateurs changent l’apparence ou le comportement d’un bloc ou d’un élément.
Les blocs sont nommés en fonction de leur rôle :
navbar.Les éléments indiquent le nom de leur bloc parent, suivi d’un double underscore/dunder (__) puis du rôle de l’élément :
navbar__link.Les modificateurs utilisent le nom du bloc ou de l’élément qu’ils modifient, suivi de deux tirets (--) et de ce que le sélecteur modifie :
navbar__link--purple.Les sélecteurs BEM sont toujours implémentés sous forme de classe.
BEM nous a aidé à rendre notre CSS beaucoup mieux organisé et plus efficace, et notre HTML plus propre et lisible, en définissant clairement la fonction des sélecteurs. Mais notre CSS n’en reste pas moins un gros amas de code sans forme ; je crois que vous êtes prêt ! Entrons dans le vif du sujet avec Sass.
