¿Qué es la metodología BEM?

25/3/2025

¿Qué es BEM?

BEM (Bloque, Elemento, Modificador) es una metodología de nomenclatura para CSS que te ayuda a escribir código más organizado, reutilizable y fácil de mantener. Se ha convertido en una de las convenciones más populares en el desarrollo front-end.

Los tres pilares de BEM:

Bloque (Block): Es un componente independiente y reutilizable de tu interfaz de usuario.
Representa una entidad significativa en tu aplicación, como un formulario, un botón o un menú de navegación.
Ejemplo: .formulario
Elemento (Element): Es una parte dependiente de un bloque.
No tiene significado por sí solo y solo existe dentro de su bloque padre.
Ejemplo: .formulario\_\_campo
Modificador (Modifier): Es una variación de un bloque o elemento.
Se utiliza para cambiar la apariencia o el comportamiento de un bloque o elemento en diferentes contextos.
Ejemplo: .formulario\_\_campo--error

Ventajas de usar BEM:

Organización: BEM te ayuda a mantener tu código CSS organizado y fácil de entender.
Reutilización: Los bloques son componentes reutilizables, lo que reduce la cantidad de código que necesitas escribir.
Mantenibilidad: BEM facilita la modificación y el mantenimiento de tu código CSS.
Colaboración: BEM proporciona una convención clara y consistente que facilita la colaboración entre desarrolladores.
Evita conflictos: Al tener nombres específicos se evitan conflictos entre selectores CSS.

Ejemplo práctico:

HTML

CSS

.formulario { /* Estilos del bloque formulario */ } .formulario__campo { /* Estilos del elemento campo */ } .formulario__boton { /* Estilos del elemento botón */ } .formulario__boton--primario { /* Estilos del modificador primario del botón */ background-color: blue; color: white; }

En resumen:

BEM es una metodología poderosa que puede mejorar significativamente la calidad de tu código CSS. Si estás buscando una forma de escribir CSS más organizado, reutilizable y fácil de mantener te recomiendo que pruebes BEM

Publicado originalmente en modestocabraldev.com.

Compartir artículo

Si te ha resultado útil, compártelo con alguien que esté construyendo su portfolio.