Sommaire
Vous avez déjà passé des heures à réécrire votre code HTML et CSS ? Alors cet article est pour vous. Découvrez comment BEM pour Block Element Modifier, peut vous aider à améliorer votre code.
Au moment du bilan après un projet web réalisé en équipe pendant mon Master spécialisé en traduction et création de sites web multilingues, je me suis demandée ce que j’aurai pu faire différemment. Comment améliorer la collaboration avec les autres développeurs sur un projet à l’avenir ? Nouveau projet: nouvelle résolution.
1. Introduction à BEM: Block Element Modifier
BEM est un outil puissant développé par Yandex, qui propose une structure claire et facile à mettre en œuvre.
Cette méthodologie permet aux développeurs front-end d’organiser et de clarifier leur code en harmonisant le nommage des classes CSS.
Block Element Modifier en bref:
- un gain de temps considérable
- une mise en forme des pages web simplifiée
- un code facile à maintenir
Découvrez comment BEM a le pouvoir de changer votre vie d’intégrateur !
2. Quels sont les avantages de Block Element Modifier ?
Une méthodologie pour structurer votre code
Cette méthodologie créée à destination des développeurs web simplifie le travail d’équipe et améliore l’uniformisation du code. En suivant une convention de nommage des classes votre code gagnera en clarté. Vous passerez moins de temps à déchiffrer le code de vos collègues ou à vous rappeler ce que vous aviez codé.
On vous propose de choisir entre deux projets: les fichiers CSS du projet A sont très longs et les noms de classes ne permettent pas d’identifier les éléments ciblés. Le projet B présente un code synthétique, compréhensible au premier coup d’œil. Sur quel projet souhaiteriez-vous travailler ?
Adopter une terminologie homogène pour le nommage de vos classes vous permettra d’obtenir un code cohérent et bien organisé. Ainsi en lisant le nom des classes, vous saurez rapidement quel élément est modifié et vous optimiserez le temps passé à coder. Suivre la méthodologie proposée par Block Element Modifier peut également s’avérer positif pour l’utilisateur final:
- une structure HTML claire
- moins de lignes de code
- des fichiers CSS plus légers
- une optimisation du temps de chargement du site web.
Un code réutilisable
Pour les développeurs Block Element Modifier présente un autre avantage de taille en favorisant la modularité du code. La structure de BEM permet la création de composants réutilisables d’un projet à un autre. Autrement dit en créant des blocs indépendants réutilisables vous produirez un code évolutif et facile à maintenir. Vous aurez la possibilité de ré-exploiter ces blocs au sein de votre projet ou de futurs projets web.
Block Element Modifier est donc un outil précieux pour les intégrateurs web. Tout ce dont vous aurez besoin pour mettre en place cette méthodologie est de la rigueur au départ du projet. Une fois cette habitude prise, vous serez doté de bonnes pratiques et d’une logique que vous pourrez appliquer à tout projet web.
Appliquer la méthodologie BEM demande de penser en termes de blocs, d’éléments et de modificateurs lors de la création de vos pages HTML.
3. Comment fonctionne Block Element Modifier ?
Block Element Modifier découpe le CSS en blocs, élements et modificateurs.
Un bloc est un élément indépendant qui peut contenir plusieurs éléments et qui est compréhensible hors de son contexte. Par exemple: le header, le footer ou un bouton.
Un élément est un constituant d’un bloc. Il n’a pas de sens en dehors du bloc auquel il appartient (son parent). Par exemple: un élément d’une liste ou d’un menu.
Un modificateur désigne toute modification de l’apparence ou du comportement d’un bloc ou d’un élément. Par exemple: la dimension d’un bouton, l’application d’un surlignage ou d’une couleur de fond à un article.
Ce schéma vous permettra de visualiser les concepts clés de BEM:
4. À quoi ressemble la syntaxe de BEM ?
Règles de base
BEM définit des règles de nommage des classes propres à chaque type:
- Bloc: donner une classe à un bloc en veillant à ce que le nom désigne clairement le type de bloc. Par exemple: class= »nav », class= »form », class= »button ».
- Élément: chaque élément reprend le nom du bloc auquel il appartient, suivi de deux underscores puis d’un nom identifiant l’élément. Par exemple: class= »nav__menu » ou class= »nav__item ».
- Modificateur: pour modifier un bloc ou un élément, conservez sa classe originale et ajoutez le nom du bloc ou de l’élément suivi de deux tirets puis du nom désignant la propriété modifiée. Par exemple: class= »nav__item nav__item–color-white ».
Pourquoi rajouter une classe pour modifier un bloc ou un élément ?
Il est important d’ajouter une classe spécifique modifiant le bloc ou l’élément de base pour:
- la cohérence visuelle de votre mise en page,
- éviter la duplication de code
- séparer le rôle du bloc ou de l’élément du rôle du modificateur.
Par ailleurs le respect de cette règle permet de s’assurer que la stylisation de l’élément soit bien prise en compte en:
- augmentant la spécificité: l’élément modifié comportera deux classes dans l’exemple ci-dessus.
- écrivant le modificateur après le bloc ou l’élément. Ainsi votre CSS redéfinit les propriétés du bloc ou de l’élément
Par exemple: pour les fonctionnalités “se connecter” et “s’inscrire” vous souhaitez créer deux boutons aux mêmes dimensions. Un bouton blanc et un bouton avec une bordure blanche:
BEM vise à limiter la spécificité
Pour les petits-enfants: veillez à bien nommer vos classes avec BEM sans trop rallonger les classes des éléments parents. Privilégiez des noms spécifiques pour chaque élément. Par exemple: nav__menu, nav__item, nav__link, nav__icon
Il est important de garder à l’esprit l’objectif de Block Element Modifier: optimiser le code et faciliter sa maintenance en veillant à la lisibilité et à la modularité.
Pour davantage de détails sur les règles de nommage des classes je vous invite à consulter la documentation officielle.
5. En résumé, que peut vous apporter BEM ?
Adopter une convention de nommage facilitera grandement la collaboration et le code écris à plusieurs dans le cadre de projets réalisés en équipe. C’est aussi une bonne pratique à suivre sur vos projets personnels pour simplifier l’évolution de votre code sur le long terme et gagnez du temps lorsque vous vous replongez dans un projet auquel vous n’avez pas touché depuis des mois.
Si vous débutez, ne pensez pas que vous devez d’abord développer vos connaissances en HTML et en CSS avant d’adopter Block Element Modifier ! Quel que soit votre parcours et votre expérience en développement web, adopter une méthodologie vous permettra de structurer vos projets web avant de vous plonger dans le code, d’autant plus si vous apprenez à coder. Si chaque développeur adopte ces bonnes pratiques on rendra le code plus lisible pour chacun.