Que es bem

bem es una metodologia para escribir clases CSS de manera que el código sea más legible y mantenible.

bem es un acronimo que significa Bloque, Elemento y Modificador.

en si, su significado ya nos dice mucho sobre como utilizarlo.

Como utilizar bem

veamos un ejemplo:

en primer lugar tendremos “Bloque”

este sera el contenedor principal de nuestro componente. por ejemplo, si tenemos un componente de tarjeta, nuestro bloque podria ser “card”

<div class="card">
    ...   
</div>

luego tenemos “Elemento”

estos son los hijos del bloque, y se representan con dos guiones bajos ”__” por ejemplo, si nuestra tarjeta tiene un titulo y un contenido, podriamos tener:

<div class="card">
    <h2 class="card__title">Titulo de la tarjeta</h2>
    <p class="card__content">Contenido</p>
</div>

finalmente tenemos “Modificador”

estos son variaciones del bloque o elemento, y se representan con dos guiones ”—” por ejemplo, si queremos tener una tarjeta destacada, podriamos tener:

<div class="card card--featured">
    <h2 class="card__title">Titulo de la tarjeta</h2>
    <p class="card__content">Contenido</p>
</div>

o si queremos que el titulo este en mayusculas, podriamos tener:

HTML:

<h2 class="card__title card__title--uppercase">
    Titulo de la tarjeta
</h2>

CSS:

.card__title--uppercase {
    text-transform: uppercase;
}