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

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


desarrollo web aprender a programar curso de programación Laravel Formación profesional Hackademy Carrera en programación Coding Bootcamp desarrollador full-stack html

¿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:

 

/Users/nicoladivenere/Desktop/Schermata 2021-06-01 alle 14.32.15.png

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.

../Schermata%202021-06-01%20alle%2014.55.44.png

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.

 

../Schermata%202021-06-01%20alle%2016.06.30.png

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:

 

../Schermata%202021-06-01%20alle%2017.09.39.png

Visualizamos el resultado en el browser:

../Schermata%202021-06-01%20alle%2017.08.13.png

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.

 

Curso de programación Aulab Hackademy

Conviértete en Desarrollador weben 3 meses

Descubre el bootcamp de programación Hackademy

Programa Completo

© 2020 Aulab. Todos los derechos reservados • P.IVA: IT07647440721 • Política de privacidad