BEM y Metodologías CSS

BEM (Block, Element, Modifier) es la metodología de nomenclatura CSS más popular en equipos. Block es el componente independiente (.card), Element es parte del block (.card__title, .card__image con doble guión bajo), Modifier es una variación (.card--featured, .card--dark con doble guión). Esta convención hace el CSS autoexplicativo y evita conflictos de nombres.

/* BEM: Block__Element--Modifier */

/* BLOCK - componente independiente */
.tarjeta { }
.menu { }
.formulario { }

/* ELEMENT - parte del bloque (separado por __) */
.tarjeta__imagen { }
.tarjeta__titulo { }
.tarjeta__descripcion { }
.tarjeta__boton { }

/* MODIFIER - variación (separado por --) */
.tarjeta--destacada { }
.tarjeta--pequena { }
.tarjeta__boton--primario { }
.tarjeta__boton--secundario { }

/* Ejemplo en HTML:
<div class="tarjeta tarjeta--destacada">
  <img class="tarjeta__imagen">
  <h2 class="tarjeta__titulo">Título</h2>
  <button class="tarjeta__boton tarjeta__boton--primario">Ver más</button>
</div>
*/