Metodología BEM: escribir CSS de forma escalable y sostenible

¿Alguna vez le ha dado a sus clases de CSS nombres aleatorios que no respetan una determinada jerarquía y no describen lo que deben hacer?

No te preocupes, la respuesta es obvia ... Especialmente cuando eres un principiante, es bastante complicado escribir código mantenible y escalable, ya que estas habilidades se desarrollan con mucha práctica y atención no solo al escribir código de trabajo, sino bien estructurado y comprensible.

Para resolver este pequeño problema, podemos utilizar la convención BEM.

Este último te permitirá escribir clases CSS que sean comprensibles tanto para ti como para todos los desarrolladores que tengan que leer tu código.

La mayor peculiaridad de BEM es la de poder escribir código modular, reutilizable en múltiples puntos del código y en múltiples proyectos. Le mostraremos en detalle cómo utilizar la convención BEM.

Para nombrar las clases CSS usamos la siguiente sintaxis:

Con bloque indicamos un módulo en nuestra página, como por ejemplo: el encabezado (header)

Element, en cambio, representa el elemento dentro de nuestro bloque (módulo), como por ejemplo el logo.

Modifier es la clase específica que modifica el bloque o el elemento.

Al analizar el siguiente código HTML, puedes adivinar instantáneamente que tenemos un bloque header con un logo y un bloque de navegación dentro. Este último se caracteriza por una lista que a su vez contiene items (li).

De esta forma resulta muy fácil comprender el propósito de una clase determinada y, sobre todo, la correlación jerárquica entre las diversas clases y los diversos elementos.

Después de haber profundizado los conceptos de bloque (block) y elemento (element), centrémonos en el de modificador (modifier). El modifier una clase que se aplica a un elemento, con el objetivo de modificar una o más propiedades del mismo.

En este caso específico, imaginemos que queremos agregar algún estilo cuando ya se ha mostrado un enlace específico. Para ello usamos el modifier respetando la sintaxis anterior (--modifier).

Desarrollamos clases de CSS:

Visualizamos el resultado en el browser:

Usar correctamente la convención BEM te facilitará enormemente la escritura del código y sobre todo te ahorrará mucho tiempo después cuando tengas que revisarlo o completarlo.