¡Guía rápida! Conoce ¿Qué es la convención BEM? y cómo aplicarla a los nombres de tus clases HTML y CSS. Un tutorial práctico, en español y escrito por devs de meltstudio.co 🧑💻✨
¿Qué significa BEM en el desarrollo de software?
El método Bloque, Elemento, Modificador (comúnmente conocido como B.E.M.) es una convención de nombres o una nomeclatura de front-end que, como su nombre indica, consta de 3 partes importantes.
La idea de este blogpost es explicar cada una de ellas y cómo éstás siguen un conjunto de reglas para conseguir una convención de nomenclatura sencilla, potente y muy útil que facilita la lectura y comprensión de las clases en HTML y CSS .
En entornos profesionales, BEM es indispensable para la eficiencia del código cuando se utiliza SASS (veremos un ejemplo más adelante).
BEM Convention
TALK DE LA SEMANA
¿Qué es Convención BEM o método BEM?
La convención BEM, metodología BEM o BEM Convention, utiliza nombres de bloques, elementos y modificadores para construir nombres de clases CSS, separados por guiones bajos dobles (__) y guiones (-).
Se basa en la idea de dividir una página web en bloques de código más pequeños y reutilizables.
¿Cómo funciona la nomenclatura BEM?
- Block: Los bloques representan el fragmento de código, componente o módulo principal que será reutilizado, puede estar anidado pero un bloque no depende de otros componentes.
- Element: El elemento es la parte individual de un bloque, que no tiene sentido por sí sola y solo tienen sentido dentro del bloque principal, si un elemento está dentro de otro elemento no significa que sean padre e hijo porque no hay jerarquía.
- Modifier: Los modificadores, por último, representan variantes, son los que pueden crear modificaciones manipulando el estilo o el comportamiento del bloque y los elementos.
Aquí tienes un ejemplo de código y los conceptos de BEM:
/* Componente Bloque */
<nav>
/* Elementos que dependen del bloque */
<ul>
/* Otro elemento */
<li></li>
</ul>
</nav>Esta es una breve introducción a lo que acabas de leer:
Si se produce un error con el reproductor, puede ver el vídeo en el siguiente LINK.
¿Por qué debería utilizar BEM para los nombres de mis clases en HTML y CSS?
BEM es una convención de nomenclatura que se utiliza para organizar y nombrar clases en hojas de estilo CSS de una manera más estructurada y mantenible. Se creó para darle manejo a los dos problemas principales en CSS:
Herencia
Especificidad
Por ejemplo, para definir estilos podemos implementar herencia, çomo en la font-family de una aplicación. Lo malo es que no podemos controlar hasta dónde llega esa herencia y debemos volver a crear otra regla CSS para los selectores que no deben tener la propiedad heredada, por lo que, terminamos haciendo doble trabajo.
Y a esto, añadimos que cuando queremos definir una nueva propiedad a un selector que ya está afectado bajo reglas CSS, debemos ser mucho más específicos (mucho más imagínate) que la especificidad anterior.
¿Cómo se implementa BEM? o ¿Cómo se escribe una clase BEM?
Cada una de las partes también tiene algunas reglas de sintaxis, orden y estrucutura:
- Block (Bloque): El nombre del bloque se escribe en letras minúsculas y se separa con guiones. Ejemplo:
.boton- Element (Elemento): Los nombres de los elementos se anidan dentro del bloque y se separan con dos guiones bajos. Ejemplo:
.boton__texto- Modifier (Modificador): Los nombres de los modificadores se anidan dentro del bloque o elemento al que se aplican y se separan con dos guiones.Ejemplo:
.boton--rojoAhora, veamos un ejemplo práctico con un botón:
<button class="boton boton--rojo">
<span class="boton__texto"> Haz click </span>
</button>Haciendo un resumen:
"boton" es el bloque principal que representa un botón.
"boton--rojo" es un modificador que indica que este botón es de color rojo.
"boton__texto" es un elemento que representa el texto dentro del botón.
Esta estructura facilita el mantenimiento y la comprensión del código, ya que cada clase tiene un propósito claro y se puede aplicar de manera consistente en todo el sitio web. Además, ayuda a evitar conflictos de nombres de clases y a mejorar la escalabilidad de tus estilos CSS.
IMAGEN ¿Cuál es el formato de nombre BEM?
BEM proporciona una sintaxis declarativa que se puede compartir para estar en sintonía.
BEM Convention in action
En este ejemplo, creamos una sencilla aplicación de tarjeta implementando SASS. Y más tarde cambiamos a la convención de nomenclatura BEM definiendo un bloque, dos elementos y los modificadores con sus respectivos nombres.
Si se produce un error con el reproductor, puede ver el vídeo en el siguiente LINK.
Ventajas de BEM
Comunica el propósito y las funcionalidades directamente
No hay conflictos de CSS ya que los nombres son siempre únicos
Fácil de mantener: BEM es fácil de leer y los componentes fáciles de localizar
Componentes reutilizables: Utilice la biblioteca para grandes aplicaciones
No en cascada: los elementos no tienen padres
Deberías considerar BEM si quieres cambiar el estilo de un componente y necesitas ver fácilmente qué modificadores y elementos existen. Y, leyendo el marcado y el CSS, deberías hacerte rápidamente una idea de qué elemento depende de otro.
¡Estamos contratando!
📍 Conócenos a través de nuestras redes 👇