Cada hoja de estilo eventualmente desarrolla un monstruo: la regla que gana solo porque llegó última con tres ID y un importante. Las capas en cascada reemplazan ese folklore con un orden que escribes una vez.

@layer reset, base, components, utilities;

@layer base {
  a { text-decoration-thickness: from-font; }
}
@layer components {
  .card a { text-decoration: none; }
}
@layer utilities {
  .link-plain { text-decoration: none; }
}

Las tres reglas que importan

  • El orden de las capas se declara una vez, primero: restablecer, luego base, luego componentes y luego utilidades. Las capas posteriores ganan independientemente de la especificidad.
  • Los estilos sin capas superan a todos los que tienen capas, por lo que un reinicio en una capa nunca puede anular un componente fuera de ella.
  • La relación !important se invierte: los estilos importantes en una capa anterior superan a los importantes en capas posteriores, que es la forma en que las bibliotecas de restablecimiento sobreviven a sus utilidades.

Adoptarlo en un sitio existente

  1. Declare el pedido en una sola línea en la parte superior de su hoja de estilo de entrada; nada se mueve todavía.
  2. Importe cada archivo existente a una capa: el código del proveedor en capas inferiores, su propio código encima.
  3. Busque las reglas importantes restantes y muévalas a la capa que las haga innecesarias; cada uno de los eliminados es un error que nunca volverás a depurar.
  4. Los estilos sin ninguna capa siguen ganando, así que utilícelos como área de preparación durante la migración y luego colóquelos en capas.

Las capas se envían a todas partes de forma moderna, y el modo de falla fuera del soporte es benigno: los archivos simplemente caen en cascada a la manera antigua. Este sitio se apoya en él en espíritu con una hoja de estilo corta y sin un montón de utilidades, pero para cualquier proyecto que cargue dos marcos y su propio tema, las capas son una actualización silenciosa y el alivio de depuración es genial.