Qué es BEM
BEM significa Block Element Modifier y es una metodología de nomenclatura de clases en CSS que se utiliza para crear estilos de manera modular y escalable. El objetivo principal de BEM es mejorar la claridad y el mantenimiento del código.
La metodología BEM divide cada componente o bloque de una página web en tres partes: el bloque (block), el elemento (element) y el modificador (modifier).
- Bloque (block): es una sección independiente y autónoma de la página web que puede contener otros elementos o bloques. Se nombra usando un prefijo que identifica el bloque, por ejemplo “btn” para un botón.
- Elemento (element): son los componentes que forman parte de un bloque y no pueden ser usados fuera de él. Se nombra usando un guion bajo después del nombre del bloque, por ejemplo “btn_icon” para el icono de un botón.
- Modificador (modifier): son las variaciones de un bloque o elemento. Se utilizan para cambiar su apariencia, estado o comportamiento, como por ejemplo, cambiar el color de un botón cuando está activo. Se nombra usando dos guiones bajos después del nombre del bloque o elemento, por ejemplo “btn__active” para el modificador de un botón activo.
Ventajas
BEM hace que el código CSS sea más legible y fácil de mantener, especialmente en proyectos grandes y complejos. Además, permite una mejor reutilización del código y evita la anidación excesiva de selectores, lo que mejora el rendimiento de la página.
La metodología BEM (Block, Element, Modifier) tiene varias ventajas:
- Claridad y estructura: Al utilizar una nomenclatura clara y estructurada para nombrar los bloques, elementos y modificadores, se obtiene un código más organizado y fácil de entender.
- Reutilización: La metodología BEM fomenta la reutilización de componentes y estilos. Al utilizar bloques y elementos comunes, se evita la duplicación innecesaria de código y se ahorra tiempo en el desarrollo.
- Escalabilidad: La metodología BEM es altamente escalable. Al dividir el código en bloques y elementos, se facilita la adición y eliminación de componentes sin afectar el resto de la página.
- Mantenimiento: Al tener una estructura clara y bien organizada, el mantenimiento del código es mucho más fácil y rápido.
- Colaboración: La metodología BEM facilita la colaboración entre equipos de desarrollo, ya que se basa en una nomenclatura clara y estructurada que es fácil de entender para todos los miembros del equipo.
Ejemplo práctico
Por ejemplo, si tuviéramos un bloque llamado “card”, que contiene un elemento “title” y un modificador “active”, las clases CSS se llamarían:
/* CSS */
.card {
/* Estilos del bloque */
}
.card__title {
/* Estilos del elemento */
}
.card--active {
/* Estilos del modificador */
}Un ejemplo de implementación de BEM en CSS para un elemento “botón” sería el siguiente:
<!– HTML –>
<div class="btn btn--active btn--large">
<span class="btn__icon"></span>
<span class="btn__text">Enviar</span>
</div>En este ejemplo, el bloque es “btn” y tiene los elementos “btn__icon” y “btn__text”. Además, tiene los modificadores “btn__primary” y “btn__large”, que indican que el botón es de tipo primario y grande, respectivamente.
En el archivo CSS, las reglas para estilos específicos del bloque, elemento o modificador se escribirían de la siguiente manera:
/* CSS */
.btn {
/* estilos para el bloque */
}
.btn__icon {
/* estilos para el elemento */
}
.btn__text {
/* estilos para el elemento */
}
.btn--active {
/* estilos para el modificador */
}
.btn--large {
/* estilos para el modificador */
}Estos son solo algunos ejemplos que se pueden utilizar en la metodología BEM. La ventaja de utilizar esta metodología es que permite crear componentes reutilizables y fáciles de mantener en proyectos grandes y complejos.
