Hoy te hablaremos de una metodología que ha logrado cambiar drásticamente la forma en que los desarrolladores estructuran el código CSS, en especial cuando buscan mantenerlo escalabre y fácil de entender. La metodología BEM puede ayudarte a escribir CSS limpio y organizado, el punto es que debes aprender a usarla para modularizar tu código de manera eficiente y aquí te explicamos cómo.
¿Qué es la metodología BEM?
BEM, que significa Block, Element, Modifier (Bloque, Elemento, Modificador), es una metodología creada por la empresa Yandex para hacer que el desarrollo de interfaces sea mucho más organizado y eficiente. La idea principal de BEM es dividir toda la interfaz de usuario en pequeñas secciones llamadas bloques, que son como piezas independientes. Esto permite que cada parte sea reutilizable y fácil de escalar a medida que el proyecto crece.
Lo interesante de BEM es que usa una convención de nombres muy clara para las clases en CSS, lo que ayuda a que el código sea limpio y fácil de entender. Por eso, cuando trabajas con proyectos grandes que se complican a medida que añades más código, BEM te ofrece una solución: mantener cada parte de tu interfaz bien organizada en bloques que no interfieren entre sí. Así, evitarás el caos y tendrás un código CSS mucho más predecible y sencillo de mantener.
Imagina que tienes varios botones en tu proyecto, pero con estilos diferentes. En lugar de escribir el código de cada botón desde cero, puedes usar modificadores para aplicar variaciones de estilo.
- Por ejemplo, podrías tener un botón principal (.boton–primario) y uno secundario (.boton–secundario), y ambos seguirían perteneciendo al mismo bloque llamado boton. Esto hace que el código sea más funcional y práctico de sostener a medida que el proyecto crece.
Conceptos de la metodología BEM
BEM maneja tres conceptos fundamentales que estructuran el código: bloques, elementos y modificadores. De esta manera, cada parte del código tiene un propósito claro y está debidamente documentado.
Bloques
Los bloques son contenedores independientes que representan una sección específica de la interfaz. Puede ser un encabezado (header), un área de contenido principal (main), o incluso una barra lateral (aside). Estos se consideran la base de la estructura en BEM, y su nombre siempre debe ir al principio de la clase.
<article class="noticia"></article>
En este ejemplo, noticia sería un bloque que contiene todos los elementos relacionados con una noticia.
Elementos
Por otro lado, los elementos son aquellas partes individuales que componen un bloque. Tienen la misma estructura del bloque, pero se nombran con dos guiones bajos para distinguirlos. Ten en cuenta que, los elementos no pueden existir por sí solos; siempre dependen del bloque.
<article class="noticia">
<h1 class="noticia__titulo">Título de la noticia</h1>
</article>
Aquí, noticia__titulo es un elemento del bloque noticia.
Modificadores
En cuanto a los modificadores, estos dejan cambiar el comportamiento o el estilo de un bloque o elemento sin alterar la estructura del código. Se añaden a la clase con dos guiones y son útiles para agregar variaciones de estilo a un componente.
<article class="noticia noticia--destacada">
<h1 class="noticia__titulo noticia__titulo--uppercase">Título de la noticia</h1>
</article>
En este caso, noticia–destacada es un modificador del bloque noticia, y noticia__titulo–uppercase modifica el estilo del título para que esté en mayúsculas.
Ventajas de usar BEM
Código más predecible
Como sigue una convención clara para nombrar clases, es sencillo saber a qué bloque o elemento pertenece una clase solo con ver su nombre. Así el trabajo en equipo y la comprensión del código son mucho más fáciles, incluso para quienes no lo crearon.
Reutilización de componentes
Como BEM ofrece la modularización, se puede reutilizar bloques y elementos en diferentes partes del proyecto sin preocuparse por que los estilos entren en conflicto.
Independencia de bloques
Al ser independientes los bloques, puedes mover un bloque a cualquier lugar del documento sin afectar sus estilos ni comportamiento. Esto te servirá mucho cuando trabajes en proyectos de larga duración.
Mantenimiento sencillo
Conforme los proyectos crecen, se vuelve una prioridad mantener el código. Lo grandioso es que con BEM, las actualizaciones o correcciones se pueden hacer sin afectar otras áreas del código, gracias a su estructura modular.
Desventajas de BEM
Convenciones largas
El sistema de nombres que se maneja con BEM da como resultado clases muy largas y verbosas, y resulta difícil de manejar para algunos desarrolladores. Por ejemplo, una clase como menu__item–active puede parecer excesiva en comparación con otras metodologías.
Curva de aprendizaje
Aunque es una metodología fácil de entender, algunos desarrolladores se demoran en acostumbrarse a las convenciones de nombres, especialmente si han trabajado con un enfoque CSS más tradicional.
Difícil en proyectos pequeños
No se recomienda implementar BEM para proyectos pequeños, porque puede parecer innecesaria o excesiva, ya que la modularización no es siempre necesaria cuando solo se manejan pocos componentes.
Implementar BEM en tus proyectos CSS es clave para mantener el código organizado, modular y fácil de escalar, especialmente en proyectos grandes. Aunque puede tener algunas desventajas, las ventajas como la reutilización de componentes y un código más predecible lo hacen una metodología muy valiosa. Si quieres aprender a aplicar BEM en proyectos reales y convertirte en un experto en diseño web, el Bootcamp en Diseño UX/UI de KeepCoding te ofrece las herramientas para lograrlo. Este sector está lleno de oportunidades, con alta demanda, salarios competitivos y estabilidad laboral. ¡Es tu momento de dar el salto!
