¿Qué es y como funciona la metodología BEM en CSS?

Con el objetivo de escribir mejor código CSS, en los últimos meses he tratado nuevas metodologías, una de ellas es la conocida como BEM.

BEM conceptualiza las reglas CSS que escribimos en 3 elementos: Bloque, Elemento, Modificador.

  • – Bloque: Es un contenedor global que generalmente es una sección de nuestra web: Header, Footer, Sidebar, Lista de articulos, etc.
  • – Elemento: Es un elemento interno de un bloque por ejemplo: un Menu dentro de un Header. La forma que recomienda BEM para escribir un elemento es: nombre-bloque__elemento{}.
  • – Modificador: Representa un estado en particular de un bloque o elemento. Por ejempo: nombre-bloque–sidebar{}.

Tratemos de mirar otro ejemplo para comprender un poco más como funciona la metodología BEM.

¿Alguna vez has ido a comprar un coche? Si la respuesta es si, seguramente te habrás topado con varias versiones del auto que te gusta. Si tuviéramos que representar esto usando la metodología BEM en CSS tendríamos algo como esto:

/* 
*Audi A1 
*/
audi-a1{
llantas:4;
parabrisas:1;
luces-delanteras: 2;
luces-traseras: 2;
puertas: 2;
}

audi-a1__volante{
material: plastico;
color: gris;
}

audi-a1__asientos{
material: tela;
color: gris;
}

/* 
*Audi A1 Deportivo 
*/
audi-a1--deportivo{
puertas: 4;
quemacocos: 1;
luces-neon: 4;
}

audi-a1--deportivo audi-a1__volante{
material: piel;
color: negro;
}
audi-a1--deportivo audi-a1__asientos{
material: gamusa;
color: dorado;
}

Lo que vemos en este ejemplo es un auto llamado Audi a1 con dos versiones la edición normal y la versión en deportivo. Por defecto, ambos carros manejan elementos en común, como lo son las llantas, las luces delanteras y traseras, el parabrisas, etc.

Cada auto maneja en su interior elementos como unvolante y asientos. Por otro lado tenemos una variación del Audi A1 en un modelo deportivo, el cual cuenta con características particulares como el numero de puertas, el quemacocos y diferentes materiales en su interior.

Si tuviésemos que hacer una representación en HTML tendríamos algo parecido a esto:

<div class="audi-a1">
<div class="audi-a1__volante">
</div>
<div class="audi-a1__asientos">
</div>
</div>

<div class="audi-a1 audi-a1--deportivo">
<div class="audi-a1__volante">
</div>
<div class="audi-a1__asientos">
</div>
</div>

Este es un ejemplo sencillo, pero creo que explica a grandes rasgos la metodología BEM. En lo particular me gusta lo descriptivo que resulta a la hora de leer y escribir nuestro HTML y CSS. Además de que nos permite extender nuestros elementos de la web para mostrarlos en diferentes contextos.

Lo que no me gusta es la sintaxis que se maneja a la hora de escribir un Elemento o Modificador, ya que esto queda al gusto del autor. Por lo tanto te puedes encontrar diferentes formas de escribir BEM: bloque–elemento, bloque__elemento, bloque___modificador, bloque_modificador.

Otra de las cosas que se discute mucho en esta metodología es lo demasiado descriptivo que puede llegar a ser el código HTML producido. A su vez este exceso de descripción en el código HTML puede llegar a afectar el rendimiento de la web, pero eso lo dejare para la siguiente entrada.

Sitio oficial de Bem

¿Manejas alguna otra metodología para escribir CSS? Compártelo.

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Responsable: Agustín Ruiz | Finalidad: Solo la de administrar estos comentarios | Legitimación: Tu consentimiento | Destinatario: Bajo ningn concepto comunicaremos tus datos a terceros | Derechos: Acceso, portabilidad, rectificado, supresión, limitación y olvido de tus datos | Plazo de conservación: Hasta que nos solicites que los eliminemos +info.