Las capas deciden antes que la especificidad en CSS

El orden de la capa le gana a todo selector interno; así evitas que un reset pelee con un componente.

@layer reset, base, components, utilities;

@layer reset {
  * { margin: 0; }
}

@layer base {
  body { font-family: system-ui, sans-serif; }
}

@layer components {
  /* le gana al reset aunque no es más específico */
  .card { margin: 1rem; padding: 1rem; }
}

@layer utilities {
  .flush { margin: 0; }
}

Cómo funciona

1. @layer nombra el orden una vez, arriba, antes de cualquier regla.
2. Una regla en una capa posterior gana incluso contra otra más específica anterior.
3. Los estilos sin capa le ganan a toda capa: déjales la última palabra.

Palabras clave y builtins usados aquí

• layer
• margin
• padding
• rem

El intento, en números

Líneas

18

Caracteres a escribir

296

Tokens

69

Ritmo de tres estrellas

70 tpm

Al ritmo de tres estrellas de 70 tokens por minuto, este intento toma unos 59 segundos.

Escribe este fragmento

Paso 3 de 3 en La cascada; paso 9 de 26 en Selectores y el modelo de caja.

← Anterior Siguiente →