CSS Layers (@layer)

El módulo @layer en CSS permite organizar y controlar la prioridad de los estilos aplicados en una página web. Es especialmente útil cuando trabajas con múltiples estilos o importaciones de terceros.

¿Qué es @layer en CSS?

@layer es una regla de CSS que define capas de estilos. Estas capas se pueden organizar en un orden predefinido, permitiendo que ciertos estilos tengan prioridad sobre otros.

Por ejemplo, si tienes un CSS base, una capa de componentes y una capa de utilidades, puedes definirlas así:

@layer base, components, utilities;

@layer base {
  body {
    font-family: sans-serif;
    color: #333;
  }
}

@layer components {
  button {
    background: blue;
    color: white;
    padding: 0.5rem 1rem;
  }
}

@layer utilities {
  .hidden {
    display: none;
  }
}

En este caso, la prioridad de los estilos sigue el orden en el que se declararon las capas (base < components < utilities).

¿Para qué sirve @layer?

• Organizar mejor el CSS: Permite definir diferentes capas de estilos.
• Evitar conflictos entre estilos: Puedes controlar cuál tiene mayor prioridad.
• Mejorar la mantenibilidad: Hace que el CSS sea más legible y modular.

Prioridad de capas en @layer

Cuando se usan capas, los estilos dentro de una capa definida tienen menor prioridad que los estilos fuera de una capa.

@layer base {
  h1 {
    color: blue;
  }
}

h1 {
  color: red;
}

En este caso, el h1 será rojo, ya que el estilo fuera de @layer tiene mayor prioridad.

Si declaras varias capas en una sola regla, el orden en que aparecen determina su prioridad:

@layer A, B, C;

Esto significa que A tiene la menor prioridad y C la mayor.

Importando archivos CSS con @layer

Puedes importar archivos CSS en capas específicas usando @import con layer():

@import url("base.css") layer(base);
@import url("components.css") layer(components);
@import url("utilities.css") layer(utilities);

Esto mantiene el orden de prioridad definido sin importar el orden de carga de los archivos.

Uso de :root con @layer

Puedes definir variables CSS en el :root dentro de una capa para modularizar estilos:

@layer base {
  :root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
  }
}

@layer components {
  button {
    background: var(--primary-color);
    color: white;
  }
}

¿Cómo sobrescribir estilos en @layer?

Para sobrescribir un estilo en una capa inferior, simplemente declara el mismo selector en una capa superior:

@layer base {
  p {
    color: gray;
  }
}

@layer overrides {
  p {
    color: black;
  }
}

En este caso, el p será negro porque overrides tiene mayor prioridad.

fin.