¿Qué es la metodología BEM?

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

<form class="formulario">
  <input type="text" class="formulario__campo" />
  <input
    type="submit"
    class="formulario__boton formulario__boton--primario"
  />
</form>

.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;
}

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