BEM y convenciones de nombres en CSS, con generador de clases | We.Inc
Cómo nombra BEM bloques, elementos y modificadores, con un generador que revisa tus nombres de clase. Compara BEM con clases de utilidad, CSS Modules y @scope.
BEM y convenciones de nombres en CSS
BEM significa Block, Element, Modifier (bloque, elemento, modificador). Un bloque es un componente independiente como .card, un elemento es una parte que solo tiene sentido dentro de él, escrita .card__title con dos guiones bajos, y un modificador es una variante escrita .card--featured con dos guiones. Los modificadores se añaden junto a la clase base, nunca en su lugar.
BEM en una tabla
Parte
Patrón
Ejemplo
Bloque
.search-form
Elemento
block__element
.search-form__input
Modificador de bloque
block--modifier
.search-form--compact
Modificador de elemento
block__element--modifier
.search-form__button--disabled
Modificador clave y valor
block--key-value
.search-form--theme-dark
Los nombres son lo que mantiene ordenado un proyecto CSS o lo convierte poco a poco en un montón de sobrescrituras. Esta página explica las reglas de BEM según el sitio oficial de BEM, revisa tus propios nombres de clase mientras escribes y compara BEM con las otras formas en que los equipos evitan hoy que los estilos choquen.
Escribe un nombre de bloque y, si quieres, un elemento y un modificador en el generador.
Lee los nombres de clase generados y el HTML que los usa. Aparecen avisos cuando un nombre incumple una regla de BEM.
Copia el esqueleto de HTML y CSS en tu componente.
Selecciona solo con la clase única. .card .card__title añade una especificidad que BEM está pensado para evitar.
Nunca encadenes elementos como .card__body__title. Cada elemento pertenece directamente al bloque, por muy profundo que esté en el HTML.
Mantén la clase base junto al modificador: class="btn btn--large", no class="btn--large" a solas.
Nombra las cosas por lo que son, no por cómo se ven. .alert--error sobrevive a un rediseño; .alert--red no.
Elige una convención por proyecto y déjala por escrito. Una mezcla de estilos es más difícil de leer que cualquiera de ellos por separado.
Preguntas frecuentes
¿Qué significa BEM?
Block, Element, Modifier (bloque, elemento, modificador). Es un método para nombrar clases CSS que limita cada selector a una sola clase, de modo que la especificidad se mantiene plana y puedes saber por el nombre de la clase a qué componente pertenece.
¿Por qué BEM usa dobles guiones bajos y dobles guiones?
Los guiones simples ya se usan dentro de los nombres, como en search-form. Duplicar los separadores hace inequívoco el límite entre bloque, elemento y modificador, así que .search-form__submit-button se lee como un bloque y un elemento.
¿Sigue valiendo la pena usar BEM con Tailwind o CSS Modules?
Con clases de utilidad rara vez escribes nombres de clase de componentes, así que BEM importa menos. Con CSS Modules la herramienta de build acota los nombres por ti, y se recomiendan nombres cortos en camelCase. BEM sigue siendo una gran opción para CSS puro, Sass, temas de WordPress y design systems compartidos entre frameworks.
¿Cómo nombro un elemento dentro de otro elemento?
Vincúlalo al bloque, no al elemento padre. Un título dentro del cuerpo de una tarjeta es .card__title, aunque el HTML lo anide dentro de .card__body. Si la parte anidada es reutilizable por sí sola, conviértela en un bloque nuevo.
El problema que resuelven las convenciones de nombres
Todas las clases CSS viven en un único espacio de nombres global. Dos desarrolladores que escriben .title en archivos distintos acabarán dando estilo a los encabezados del otro, y la solución habitual, un selector más largo, inicia una carrera de especificidad.
Una convención le da un dueño a cada clase. Cuando .pricing-card__price falla sabes qué componente abrir, y puedes borrar el componente sabiendo que sus clases no se usan en otro sitio.
Cuando hay bloques dentro de bloques
Un bloque puede estar dentro de otro bloque. Un botón dentro de una tarjeta sigue siendo .btn, y si la tarjeta necesita posicionarlo, el mismo elemento puede llevar ambas clases: class="btn card__action".
Esta mezcla mantiene reutilizables los estilos propios del botón, mientras la tarjeta controla solo el layout, como el margen o la alineación, mediante su clase de elemento.
El scoping nativo de CSS se pone al día
@scope te permite limitar reglas a un subárbol, por ejemplo todo lo que hay dentro de .card pero no dentro de un .card__media anidado. Llegó a Baseline como recién disponible en 2026, así que revisa los navegadores de tu público antes de depender solo de él.
Las cascade layers resuelven un problema parecido: te permiten ordenar grupos enteros de estilos, de modo que un reset o un tema de terceros nunca supere a tus componentes por muy específicos que sean sus selectores.
BEM comparado con otros enfoques
Formas de evitar que los nombres de clase choquen
Enfoque
Ejemplo
Quién mantiene únicos los nombres
Mejor encaje
BEM
.card__title--large
Tú, por convención
CSS puro, Sass, temas de CMS
Clases de utilidad (Tailwind)
text-lg font-semibold
No hacen falta nombres de componente
Apps construidas con componentes
CSS Modules
styles.cardTitle
La herramienta de build reescribe los nombres
React, Vue y similares con un bundler
@scope
@scope (.card) { h2 {} }
El navegador limita las reglas
Navegadores recientes, marcado ligero
Un componente BEM completo
Bloque card con elementos y modificadores
Cada selector es una clase. El modificador featured cambia el borde y permite que un elemento reaccione a través del modificador del bloque.
Errores comunes con BEM
Incorrecto y correcto
Incorrecto
Correcto
Por qué
.card__body__title
.card__title
Los elementos pertenecen al bloque, no a otros elementos
class="card--featured"
class="card card--featured"
Un modificador necesita su clase base
.card .card__title
.card__title
El anidamiento extra añade especificidad
div.card__title
.card__title
Los selectores BEM usan solo nombres de clase
.card--blue
.card--primary
Nombra el significado, no el color
Generador de nombres de clase BEM
Escribe un bloque, un elemento y un modificador para obtener nombres de clase, con el HTML y el CSS correspondientes y avisos cuando un nombre incumple una regla.
Bloque
Elemento (opcional)
Modificador (opcional)
Bloque
Elemento
Modificador
{label}: no incluyas __ ni -- tú mismo; el generador añade los separadores.
{label}: usa letras latinas minúsculas, dígitos y guiones simples.