top:: CSS

BEM : Block, Element, Modifier

BEM (Block, Element, Modifier) es una metodología de nomenclatura de clases CSS que ayuda a crear estilos reutilizables y escalables. La idea principal detrás de BEM es dividir el código en bloques independientes y definir relaciones claras entre ellos. Está compuesto por tres partes principales:

• Bloque: representa un componente independiente y reutilizable en la interfaz. Se le da un nombre descriptivo y único (por ejemplo, "botón" o "encabezado").
• Elemento: es una parte constituyente de un bloque y no tiene significado fuera de él. Los elementos se escriben como parte del bloque al que pertenecen, utilizando un doble guion bajo (por ejemplo, "botón__texto").
• Modificador: representa una variante o estado diferente de un bloque o elemento. Se utiliza para cambiar la apariencia o el comportamiento del bloque o elemento. Los modificadores se escriben como parte del bloque o elemento, utilizando un doble guion medio (por ejemplo, "botón--primario" o "encabezado__logo--grande").

BEM ayuda a mantener un código CSS más estructurado, legible y reutilizable, ya que cada clase tiene un propósito claro y está asociada con un elemento específico en el HTML.