@layer

<< @supports Funciones matemáticas >>

La regla @layer nos permite declarar una capa de cascada, es decir, nos permite agrupar código CSS en el interior de una capa para a posteriori unirlo manteniendo el orden o precedencia especificado en el caso de múltiples capas.

@layer special {
    .item {
        color: rebeccapurple;
    }
}

En el ejemplo anterior, tenemos una capa llamada special, este nombre lo da el desarrollador (nosotros) y significa que a partir de ahora va a existir una capa llamada special con los estilos que hemos puesto dentro. Si el desarrollador no indica un nombre a esa capa (@layer nombreCapa), estamos creando una capa anónima y por tanto, no las podremos reordenar ni añadir más código a ellas. Si creamos varias @layer anónimas, cada una será independiente y por tanto, diferente a la otra.

La forma de crear estas capas puede ser utilizando @layer o incluso @import. Vamos a ver las distintas formas:

@layer nombre;
@layer nombre.subcapa;
@layer nombre1, nombre2, nombre3/* ... */;
@import (url) layer(nombre);

Cuando le damos un nombre a una capa, estamos indicando el orden de las capas (orden por el que se han definido), y por tanto será el orden por el que se va a evaluar salvo que se modifique.

Podemos cambiar como hemos dicho el orden de las capas, para ello, usaremos la regla @layer seguida de las capas que queremos reordenar separadas por comas y antes de ser declaradas. Ejemplo:

@layer base, special;

@layer special {
    .item {
        color: rebeccapurple;
    }
}

@layer base {
    .item {
        color: green;
        border: 5px solid green;
        font-size: 1.3em;
        padding: 0.5em;
    }
}

En el ejemplo anterior, estamos indicando el orden de los layer en la primera línea ( base y special), pero en el caso de no haberlo puesto el orden sería special y base y por tanto el estilo del documento cambia. Si por ejemplo definimos dos veces un mismo layer, lo que hace es añadir (o sobreescribir) estilos a una capa ya definida.

Para anidar capas CSS será tan fácil como usar la regla @layer dentro de otra regla @layer o usar una sintaxis rápida como la de separar los nombres con punto. Por ejemplo:

@layer base {
    @layer special {
        .item {
            color: rebeccapurple;
        }
    }
}

Se puede definir de la siguiente forma:

@layer base.special {
    .item {
        color: rebeccapurple;
    }      
}

Ya conocemos la regla @import y por tanto, podemos utilizarla para importar ficheros externos incorporándolos a nuestra página y añadirlos a una capa específica, con esto conseguiremos que el código externo que tenemos en varios archivos se pueda usar directamente en una capa.

@import url("alertas.css") layer(alerts);

Ver vídeo...

<< @supports Funciones matemáticas >>