Metodologías: BEM, @layer y cuándo importa

Los tokens organizan los VALORES; falta ordenar la CASCADA — el otro frente de la guerra de especificidad de la lección 1. Dos herramientas lo resuelven: BEM, una convención para nombrar sin colisiones, y @layer, que controla qué gana en la cascada de forma explícita. Y algo igual de importante: saber cuándo nada de esto hace falta.

BEM: direcciones claras, sin colisiones

/* BLOQUE: el componente */
.tarjeta { }

/* ELEMENTO: una parte del bloque (doble guion bajo) */
.tarjeta__titulo { }
.tarjeta__precio { }

/* MODIFICADOR: una variante (doble guion) */
.tarjeta--destacada { }
.tarjeta__precio--rebajado { }

Todas son de UNA clase → misma especificidad baja (0,1,0) → el orden en el archivo decide, no una guerra de anidamiento. BEM se ve verboso al principio, pero elimina la ambigüedad: sabes exactamente qué estiliza cada regla y dónde vive. Úsalo con pragmatismo (no todo necesita las tres partes); su valor es la especificidad plana y los nombres que se explican solos.

@layer: ordenar la cascada a propósito

@layer es la herramienta moderna que resuelve la especificidad de raíz: las reglas en una capa POSTERIOR ganan a las de una capa anterior, SIN IMPORTAR su especificidad.

<h2 id="titulo" class="titulo">¿De qué color soy?</h2>
<p class="nota">El #id (alta especificidad) está en la capa "base"; la .clase (baja) está en la capa "componentes", declarada DESPUÉS. La capa posterior gana: soy verde, no rojo.</p>

@layer base, componentes;

@layer base {
#titulo { color: #dc2626; }   /* especificidad ALTA (un id) */
}

@layer componentes {
.titulo { color: #16a34a; }   /* especificidad BAJA (una clase)... pero capa POSTERIOR */
}

body { font-family: system-ui; padding: 20px; background: #f8fafc; }
.titulo { font-size: 24px; }
.nota { color: #64748b; font-size: 14px; max-width: 52ch; line-height: 1.6; }

El título es VERDE aunque el #titulo rojo tiene muchísima más especificidad — porque la capa componentes se declaró después de base. Esto es imposible con CSS normal, y es la cura definitiva a la guerra de especificidad: declaras el orden de capas una vez (@layer reset, base, componentes, utilidades;) y nunca más peleas con !important.

Cuándo nada de esto importa

Mini-reto

Refactoriza el CSS de "El Observador" con capas: declara @layer reset, base, componentes, utilidades; al inicio, mete tu reset en reset, los estilos de elementos base (body, tipografía) en base, y tus componentes (.tarjeta, .barra) en componentes. Comprueba que ya no necesitas ningún !important para que tus componentes ganen — la capa lo hace por ti. Y nombra un componente con BEM completo para sentir la diferencia de claridad.

Qué sigue

Acabas de construir, a mano, un sistema de tokens con escalas, temas y capas. La próxima lección revela algo revelador: eso que construiste ES, casi exactamente, la configuración de Tailwind. Verás cómo tu trabajo manual se traduce directo a la mentalidad utility-first — el puente al curso de Tailwind.