revert-layer: deshacer una capa entera

revert retrocede al origen anterior de la cascada. revert-layer hace lo mismo un escalón más abajo: retrocede a la capa anterior dentro del mismo origen. Es la única de las palabras clave globales que no tiene sentido sin haber entendido @layer, y también la única que permite decir “para este elemento, haz como si esta capa no hubiera dicho nada”, que resulta ser una operación mucho más útil de lo que parece.

Qué hace exactamente

Si el valor cascadeado de una propiedad es revert-layer, el motor recalcula el valor como si ninguna regla de la capa actual hubiera declarado esa propiedad para ese elemento. El ejemplo mínimo, tomado de la especificación, lo muestra sin ambigüedad:

@layer una {
  div { height: 100px; }
}

@layer dos {
  div { height: 200px; }
  div { height: revert-layer; }
}

El resultado es 100px. Dentro de la capa dos, la segunda regla gana a la primera por orden, y su valor revert-layer provoca que se descarte lo que la capa dos aportaba, con lo que el valor pasa a ser el de la capa una.

Fíjate en un detalle del ejemplo: también se descartó el 200px, que estaba en la misma capa y en otra regla. No es que revert-layer sustituya a la declaración inmediatamente anterior; deshace la contribución de la capa completa para esa propiedad.

Hay además un comportamiento que conviene tener presente porque produce efectos a distancia: las propiedades que forman pareja lógica y física se revierten juntas. Revertir block-size revierte también el height declarado en esa capa, y viceversa, porque el motor las trata como el mismo grupo.

Desde dónde se retrocede

Tres casos, y los tres se dan en la práctica.

Desde una capa intermedia, se retrocede a la capa anterior, que es el caso del ejemplo.

Desde CSS que no está en ninguna capa, se retrocede a la última capa explícita. Recuerda que lo no encapado vive en una capa implícita situada al final, así que revert-layer fuera de toda capa significa “que decida la última de mis capas”. Es una forma cómoda de anular sobrescrituras sueltas sin borrarlas.

Desde la primera capa, o cuando no hay ninguna declaración de menor precedencia en el mismo origen, el retroceso continúa hacia el origen anterior. En ese caso revert-layer acaba comportándose como revert, y el valor resultante es el que aportaría la hoja del navegador o del usuario.

Queda un caso especial que la especificación trata aparte y que conviene conocer aunque sea raro: revert-layer en un estilo importante pegado al elemento solo revierte los estilos pegados al elemento y el origen de animación intermedio, y no las reglas importantes de autor que haya en medio. La razón es evitar que una declaración en el atributo style pueda desmontar de un plumazo toda la jerarquía de capas importantes del documento.

La familia completa

Cinco palabras que retroceden o rellenan, ordenadas de menos a más contexto que tienen en cuenta:

Existe una sexta en el borrador, revert-rule, que retrocedería a la regla anterior en lugar de a la capa. Es la más reciente de la familia y no forma parte de lo que puedes escribir hoy con garantías; menciónala solo para saber que la idea está sobre la mesa.

Una precisión sobre las animaciones que distingue a las dos palabras de retroceso: para revert, el origen de animación se considera parte del origen de autor y se descarta junto con él. Para revert-layer no: el origen de animación se comporta a estos efectos como una capa propia. La consecuencia práctica es que revert-layer puede devolverte el valor que aporta una animación en curso, y revert no.

Usos concretos

Sacar un componente de un tema. El caso descrito arriba, en su forma más directa:

@layer base, tema, componentes;

@layer componentes {
  .sin-tema, .sin-tema * {
    all: revert-layer;
  }
}

Cuidado con la brocha: all: revert-layer revierte todas las propiedades, incluidas las que sí querías conservar del tema. En un sistema real es más frecuente y más seguro revertir un grupo acotado.

Anular una variante bajo una condición. Dentro de una consulta, devolver una propiedad al estado que tenía sin esa capa, sin necesidad de repetir su valor:

@layer componentes {
  .tarjeta { box-shadow: 0 1px 3px oklch(0% 0 0 / 0.2); }

  @media (prefers-contrast: more) {
    .tarjeta { box-shadow: revert-layer; }
  }
}

Esto es mejor que escribir box-shadow: none, porque si una capa anterior aportaba una sombra distinta para contraste alto, se respeta.

Diagnosticar. Aplicar temporalmente all: revert-layer a un elemento y comparar. Lo que cambie es exactamente lo que aportaba la capa actual.

Con esto queda cerrado el mecanismo de defecto. Falta ver dónde encaja todo esto dentro del recorrido completo que hace un valor desde tu hoja de estilos hasta la pantalla, que es la cadena de valores.