Skip to main content

BEM

Le bien et le mal !​

Tailwind, c'est bien, c'est rapide, c'est scalable... On peut dire tout ce qu'on veut, mais il y a des moments où quand on arrive dans un template, et se prendre 30 classes CSS ou devoir repasser dans l'inspecteur d'élément, c'est galère...

Distinguer ses Node​

Il est primordial de pouvoir identifier, dans le DOM et dans le code les bons éléments ! Alors rien de mieux que d'utiliser BEM...

BEM pour tous les éléments ?​

NON !!!! Pour des éléments qui changent le layout d'une page, il faut appliquer BEM.

Il ne faut pas l'appliquer sur des petits éléments, exemples tous les <a> ou tous les <li>... Mais si un <parent> regroupent plusieurs <child> et que le code devient compliquer à lire, il le sera encore plus à debugger... Donc on identifie, en début de class, l'élément.

tip

Correct car on peut identifier les parties principales de la card


<div class="card_product max-w-sm bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
    <a class="card-product__image" href="#">
        <img class="rounded-t-lg" src="/docs/images/blog/image-1.jpg" alt="" />
    </a>
    <div class="card-product__content p-5">
        <a class="card-product__content-title" href="#">
            <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
        </a>
        <p class="card-product__content-excerpt mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
        <a href="#" class="card-product__content-button inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
            Read more
        </a>
    </div>
</div>

danger

Interdit car code illisibile


<article class="max-w-sm bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
   <a href="#">
       <img class="rounded-t-lg" src="/docs/images/blog/image-1.jpg" alt="" />
   </a>
   <div class="p-5">
       <a href="#">
           <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
       </a>
       <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
       <a href="#" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
           Read more
       </a>
   </div>
</article>

Et Javascript dans tout çà ?​

Pour des éléments dont qui impliquent une utilisation de Javascript, on identifie les éléments avec du js--******, par exemple :

  • class="js--trigger-modal-open"
  • class="js--trigger-modal-close"
  • class="js--trigger-quick-add-to-cart"

Le cumul​

Il faut cumuler les BEM et les JS-identifier... BEM pour avoir un DOM plus facilement identifiable, et le JS-identifier sert à rechercher dans votre code plus facilement

class="js--trigger-modal-open card_product__button"