Modèle CSS BEM – Un guide pour écrire du CSS évolutif et maintenable

Dans cet article, nous allons plonger dans la méthodologie BEM (Block, Element, Modifier), une convention de dénomination CSS populaire qui vous aide à écrire du CSS propre, structuré et maintenable pour les grands projets. BEM garantit que votre code reste évolutif à mesure que le projet se développe et réduit les risques de conflits de style.

1. Qu'est-ce que le BEM ?

BEM signifie :

• Bloc : entité autonome qui a du sens en soi, comme un bouton, un menu ou un formulaire.
• Élément : partie du bloc qui exécute une fonction spécifique, comme une étiquette de bouton ou un élément de menu.
• Modificateur : variation ou état d'un bloc ou d'un élément, comme un bouton désactivé ou un élément de menu en surbrillance.

La méthodologie BEM met l'accent sur la création de code CSS réutilisable, prévisible et maintenable.

Convention de dénomination BEM :

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

• Bloc : représente le conteneur principal.
• Élément : suit le nom du bloc, séparé par un double trait de soulignement (__).
• Modificateur : suit le nom du bloc ou de l'élément, séparé par un double trait d'union (--).

2. Définir la structure

Décomposons la structure de BEM avec un exemple.

Exemple:

    

        
Home
        
About
        
Contact
    

Dans cet exemple :

• Bloc : .menu est le bloc principal représentant le menu de navigation.
• Élément : .menu__list et .menu__item sont des éléments dans le bloc.
• Modificateur : .menu__item--active est un modificateur indiquant l'état actif de l'élément de menu.

3. Blocs dans BEM

Un bloc est un composant indépendant et réutilisable. Considérez-le comme une entité autonome qui peut être placée n'importe où dans votre code sans vous soucier que son style soit affecté par d'autres éléments.

Exemple:

.button {
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
}

Ici, .button est un bloc qui définit les styles d'un composant bouton. Vous pouvez réutiliser ce bloc sur plusieurs parties de votre site Web.

4. Éléments dans BEM

Un élément fait partie d'un bloc qui n'a pas de signification autonome. Il est lié au bloc et existe pour exécuter une fonction liée au bloc.

Exemple:

.button__icon {
    margin-right: 10px;
}
.button__label {
    font-size: 14px;
}

Ici:

• .button__icon est un élément du bloc .button, représentant une icône dans le bouton.
• .button__label est un autre élément, représentant l'étiquette de texte du bouton.

5. Modificateurs dans BEM

Un modificateur représente une variation d'un bloc ou d'un élément. Les modificateurs sont utilisés pour modifier l'apparence ou le comportement d'un composant, comme changer la couleur d'un bouton ou agrandir un élément.

Exemple:

.button--primary {
    background-color: #2ecc71;
}
.button--large {
    padding: 15px 30px;
}

Ici:

• .button--primary est un modificateur qui change la couleur d'arrière-plan du bouton.
• .button--large est un autre modificateur qui augmente la taille du bouton.

Les modificateurs peuvent également être appliqués aux éléments :

.button__icon--small {
    width: 10px;
    height: 10px;
}

6. Avantages de l'utilisation de BEM

• Évolutivité : BEM est conçu pour être évolutif, ce qui le rend idéal pour les projets plus importants comportant de nombreux composants.
• Réutilisabilité : les blocs sont autonomes et peuvent être réutilisés dans différentes parties d'un projet.
• Maintenabilité : BEM encourage une dénomination claire et cohérente, ce qui facilite la maintenance du CSS à mesure que le projet se développe.
• Prévisibilité : vous pouvez facilement savoir quels éléments appartiennent à quels blocs et comprendre leurs variations en fonction du modificateur.

7. BEM en action

Regardons un exemple plus complet qui inclut des blocs, des éléments et des modificateurs :

HTML :

    

        
Card Title
    
    

        
This is a simple card component.
    
    

        Read More
    

CSS :

/* Block */
.card {
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 5px;
}

/* Elements */
.card__header {
    margin-bottom: 15px;
}
.card__title {
    font-size: 18px;
    color: #333;
}
.card__body {
    margin-bottom: 15px;
}
.card__text {
    color: #666;
}
.card__footer {
    text-align: right;
}

/* Modifier */
.card__button--primary {
    background-color: #3498db;
    color: white;
}

Dans cet exemple :

• .card est le bloc qui représente l'intégralité du composant de la carte.
• .card__header, .card__title, .card__body et .card__footer sont des éléments du bloc de carte.
• .card__button--primary est un modificateur qui applique un style principal au bouton de la carte.

8. Erreurs courantes à éviter dans BEM

• Trop d'éléments imbriqués : évitez les éléments profondément imbriqués, car cela peut conduire à des noms de classe inutilement longs.
• Modificateurs inutiles : n'utilisez des modificateurs que lorsque vous devez modifier l'apparence ou l'état d'un bloc ou d'un élément.
• Combiner BEM avec d'autres conventions de dénomination : respectez BEM tout au long de votre projet pour plus de cohérence.

Conclusion

La méthodologie BEM est un moyen puissant de garder votre CSS organisé, prévisible et évolutif. En décomposant vos composants en blocs, éléments et modificateurs, vous pouvez maintenir un code plus propre et éviter les conflits de style, rendant le développement plus rapide et plus efficace au fur et à mesure de votre projet. grandit.

Suivez-moi sur LinkedIn

Ridoy Hasan