¿Qué es BEM?

Agregar estilos a nuestra web mediante CSS es relativamente sencillo. No obstante, cuando nuestra página va creciendo y creciendo, el mantener el control del CSS se puede volver todo un desafío.

Para solucionar este problema aparecen las metodologías de nomenclatura, las cuales definen la forma en cómo nombramos nuestras clases CSS. BEM es una de ellas.

BEM busca que manejemos las clases en css de una forma modularizada, logrando así que nuestros estilos sean más ordenados y por ende fácil de leer y modificar.

¿Qué significa el nombre BEM?

BEM es un conjunto de siglas, las cuales significan:

• B: Block (Bloque)
• E: Element (Elemento)
• M: Modifier (Modificador)

Estas siglas plasman la filosofía de BEM, la cual dice que nuestro código en CSS se puede organizar en bloques, elementos y modificadores.

Bloque

Este nivel hace referencia a todos los elementos que funcionaran como contenedores, teniendo dentro suyos más elementos. Un ejemplo de esto puede ser el header, el footer, el aside, una etiqueta div, etc.

Ejemplo: Definimos el bloque cards.

<div class="cards">
     <!-- Aquí agregarás todos los elementos del bloque -->
</div>

.cards {
 background-color: #e3f2ff;
 border: 1px solid #d4d4d4;
}

Elemento

Son todos los elementos que pertenecen y conforman a un bloque. En BEM, la nomenclatura de un elemento es la siguiente:

[nombre_bloque]__[nombre_elemento]

Ejemplo: Definimos los elementos card-noticia, card-anuncio y card-comentario para el bloque cards.

<div class="cards">
    <!-- Aquí agregarás todos los elementos del bloque -->
    <div class="cards__card-noticia"></div>
    <div class="cards__card-anuncio"></div>
    <div class="cards__card-comentario"></div>
</div>

/* ELEMENTOS */
.cards__card-noticia {
 height: 50px;
 width: 250px;
 border: 2px solid #ff4d20;
}

.cards__card-anuncio {
 height: 100px;
 width: 250px;
 border: 2px solid #9849ff;
}

.cards__card-comentario {
 height: 200px;
 width: 250px;
 border: 2px solid #83ff5e;
}

Modificador

Estos permiten modificar los estilos para un elemento en particular. En BEM, la nomenclatura de un modificador es la siguiente:

[nombre_elemento] – – [nombre_modificador]

Ejemplo: Agregamos el modificador restaltado asociado al elemento card-comentario. Para esto crearemos un nuevo card con el modificador.

<div class="cards">
    <!-- Aquí agregarás todos los elementos del bloque -->
    <div class="cards__card-noticia"></div>
    <div class="cards__card-anuncio"></div>
    <div class="cards__card-comentario"></div>
    <div class="cards__card-comentario--resaltado"></div>
</div>

/* MODIFICADORES */
.cards__card-comentario--resaltado {
 color: white;
 background-color: #2e4bc6;
}

¡Bien! Ahora que ya tienes las bases de BEM el siguiente paso es utilizarlo en algún proyecto y verlo en acción. Sin duda tu código CSS será más ordenado y estará mejor preparado para cuando necesite cambios o mejoras.

Gracias por llegar hasta este punto. Si te fue útil esta información, por favor no olvides compartirla.

Si quieres ver el código completo del ejemplo de este post te dejo el link al repositorio de Github para que lo modifiques como gustes.

Adicionalmente si deseas saber un poco más de BEM te dejo el link a la documentación oficial.

Gracias nuevamente. ¡Nos leemos pronto!