@layer
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);