Méthode BEM

Le BEM, acronyme de "Block Elements Modifiers", est une méthode permettant d'organiser les composants d'une page Web.

<section class="hero">
    <div class="hero__content">
        <h2 class="hero__content__title">Titre de ma section</h2>
        <p> lorem </p>
        <button class="hero__content__button--active">Mon bouton</button>
    </div>
    <div class="hero__img">
        <img src="monimage.jpg" alt="mon image">
    </div>
</section>

Le BEM découpe une page selon deux critères :

• Le bloc : c'est un composant parent contenant un ou plusieurs éléments. Celui-ci peut être indépendant comme un footer, une navigation...

• L'élément : c'est un composant appartenant à un bloc. Cela pourra être notamment un contenu, un titre, un lien...

• le modificateur. Celui-ci répond à un comportement et se modifie selon le contexte ou l'action d'un utilisateur sur une page. Le modificateur peut agir autant sur un bloc que sur un élément. Ainsi, une DIV contenant un élément présent sur chaque page peu arborer une couleur de fond différente selon la page sur laquelle il se trouve.