BEM (Block, Element, Modifier) est une méthode de nomination des classes dans les feuilles de style CSS qui est conçue pour faciliter la maintenance, améliorer la qualité visuelle du code.
Avec BEM, les noms de classe sont composés de trois parties:
- BLOCK représente l’entité la plus haute niveau de l’interface utilisateur, comme un menu de navigation ou un formulaire de login.
- ELEMENT est une partie spécifique d’un block, comme un bouton dans un formulaire de login ou un lien dans un menu de navigation.
- MODIFIER est une variante ou une extension d’un block ou d’un élément, comme un bouton de login de couleur rouge ou un menu de navigation de style horizontal.
<nav class="menu menu--horizontal"> <a class="menu__item" href="/">Accueil</a> <a class="menu__item" href="/blog">Blog</a> <a class="menu__item" href="/contact">Contact</a> </nav> <form class="login-form"> <input class="login-form__input" type="text" placeholder="Votre pseudo"> <input class="login-form__input" type="password" placeholder="Votre mot de passe"> <button class="login-form__button login-form__button--red" type="submit">Se connecter</button> </form>
En utilisant la méthode BEM, il est facile de voir que le menu est un block horizontal et que les éléments de menu sont des éléments de menu. De même, il est facile de voir que le formulaire de login a des champs de formulaire d’entrée et un bouton de connexion de couleur rouge. Cela peut rendre le code CSS associé plus facile à comprendre et à maintenir.
BEM & SASS
L’intérêt d’utiliser la méthode BEM avec du SASS est de créer des styles CSS modulaires, réutilisables et facilement maintenables. Voici quelques avantages spécifiques de l’utilisation de BEM avec SASS.
Exemple :
//PARTIE MENU :
// Variables pour les couleurs et les tailles
$menu-bg-color: #333;
$menu-item-color: #fff;
$menu-item-padding: 1rem;
// Mixin pour le style des items du menu
@mixin menu-item-style {
display: block;
padding: $menu-item-padding;
color: $menu-item-color;
}
// Styles pour le menu horizontal
.menu {
&--horizontal {
display: flex;
background-color: $menu-bg-color;
color: $menu-item-color;
// Utilisation du mixin pour le style des items du menu
&__item {
@include menu-item-style;
}
}
}
//PARTIE FORMULAIRE :
// Variables pour les couleurs et les tailles
$login-form-bg-color: #f4f4f4;
$login-form-input-border-color: #ddd;
$login-form-button-color: #fff;
$login-form-button-padding: 1rem;
// Styles pour le formulaire de connexion
.login-form {
background-color: $login-form-bg-color;
&__input {
border-color: $login-form-input-border-color;
}
&__button {
color: $login-form-button-color;
padding: $login-form-button-padding;
// Styles pour la variante --red
&--red {
background-color: red;
}
}
}
Pour en savoir, n’hésitez pas à consulter la documentation de bem.info