Cuando se trabaja con hojas de estilos muy extensas puede ser necesario agrupar el código en diferentes capas con el fin de tener un mayor control de la especificidad. CSS provee la regla arroba @layer, que permite crear capas de cascada que, como su nombre indica, tienen su propia cascada y su propia lógica.
La agrupación de reglas CSS en capas específicas ayuda a resolver los conflictos de especificidad que suelen aparecer en proyectos grandes. Esto es posible gracias a que se puede crear tantas capas como sea necesario y se pueden ordenar de forma personalizada. Así se puede sobreescribir estilos con facilidad.
Ventajas de usar capas:
- Organizar código en módulos
- Sobreescribir estilos CSS
- Evitar conflictos de especificidad
Por tanto, en una hoja de estilos CSS puede haber múltiples capas que estructuren de forma diferente la especificidad de las reglas CSS, añadiendo un nuevo orden de precedencia de los selectores. Las capas funcionan de forma similar a la que podemos encontrar en cualquier herramienta de diseño gráfico.
La sintaxis de esta regla arroba es muy sencilla: se usa el símbolo @ (arroba) y la palabra clave que la define; por tanto: @layer. Le sigue un nombre o una lista de nombres de capas, exceptuando las que sean anónimas.
Vamos a ver un pequeño ejemplo en el que creamos dos capas para añadir código CSS. En una se aplica un reinicio de estilos y en la otra se especifica algunos colores de base que definen el aspecto básico de una página web.
Código CSS:
@layer reinicio {
html, body, div {
direction: ltr;
margin: 0;
padding: 0;
}
}
@layer base {
html {
background: #eee;
color: black;
}
}
Tal y como se puede ver en este ejemplo, las dos capas tienen los nombres reinicio y base, cada una con sus reglas CSS.
Si hubiese reglas CSS con la misma especificidad en las dos capas, los valores de la última capa anulan los valores de la anterior. La razón de esto es que no se ha indicado ningún orden determinado para las capas creadas.
Ordenar capas
Cuando las capas ya están creadas, el paso lógico que sigue es ordenarlas. Si no se ordenan, el orden de aparición determina la relevancia de las reglas CSS que contienen. La última capa tiene mayor relevancia, por lo tanto sobreescribirá la capa anterior en caso de que haya declaraciones iguales.
Para ordenar capas de cascada debe utilizarse nuevamente la regla @layer. Pero en este caso, en vez de usarla para introducir reglas CSS dentro de ella, se usa para indicar un nombre o una lista de nombres de capas. Para que funcione, hay que declarar el orden de las capas antes de crearlas.
Código CSS:
/* Ejemplo 1 */
@layer reinicio, base;
/* Ejemplo 2 */
@layer base, reinicio;
/* Ejemplo 3 */
@layer base, plantilla, botones;
Así, alterando el orden de las capas podremos cambiar de una sola vez la especificidad de todas las reglas CSS que contienen. Dentro de cada capa, la especificidad funciona de forma normal, según el valor del selector.
Capas anónimas
Con @layer es posible crear capas que no tengan nombre, llamadas capas anónimas. Su orden de precedencia depende de su ubicación respecto al resto de las capas que hayamos creado, con y sin nombre. Los estilos declarados fuera de capa también pueden sobreescribir las capas anónimas.
Veamos un ejemplo de código CSS:
@layer {
color: darkblue;
}
Hay que tener en cuenta que no se puede asignar reglas CSS a una capa anónima concreta, y de hecho, las reglas de todas las capas anónimas se fusionarán en una única capa. Por tanto, no será posible hacer referencia a ninguna capa anónima cuando se necesite modificar su orden de precedencia.
Fusión de capas
En el caso de crear varias capas con el mismo nombre, las reglas CSS contenidas serán tratadas como si estuvieran en la misma capa. Lo que determinará el resultado será la especificidad y el orden en el que se encuentren.
De hecho, la creación de capas con un nombre que ya existe es la forma de añadir nuevas reglas CSS a las capas existentes.
De igual manera, en relación con todas las reglas CSS que estén dentro de capas anónimas o fuera de las capas, el resultado se determinará a partir de la especificidad de sus selectores y de su ubicación en el código.
Anidación de capas
Otra característica de las capas CSS es que se pueden anidar, por lo que constituyen una herramienta con una gran flexibilidad a la hora de controlar la especificidad. La anidación de capas es un proceso muy sencillo: tan solo hay que crear una nueva capa mientras estamos dentro de otra capa.
Código CSS:
@layer primera {
@layer segunda {
@layer tercera {
color: red;
}
}
}
Existe otra forma todavía más sencilla de anidar capas y que puede ser útil en algunos casos concretos. Se trata de separar los nombres de las capas con un punto (.) al momento de crearlas. De esta manera:
Código CSS:
@layer primera.segunda.tercera {
color: red;
}
De esta manera se está indicando que la capa «tercera» está dentro de la «segunda», y que esta última está dentro de la «primera».
Importar código en una capa
Todavía puede irse un paso más allá con el uso de capas. Utilizando la regla arroba @import para enlazar un archivo CSS e incluir su código en nuestra hoja de estilos, es posible indicar que se añade en una capa CSS específica.
Vamos a ver un ejemplo de código CSS en el que importamos un archivo llamado capa.css y lo vinculamos con una capa que se llamará «nueva-capa».
Código CSS:
@import "capa.css" layer(nueva-capa);
Esta combinación de dos reglas arroba constituye un buen sistema para separar las capas en diferentes archivos CSS, haciendo que, en algunos casos, el código sea mucho más fácil de mantener.
Fuera de las capas
Todas las reglas CSS que no estén dentro de una capa, de forma automática se colocarán en un espacio único exterior. Estas reglas se leerán después de todas las capas que hayamos definido con la regla arroba @layer, por lo que las reglas CSS del exterior anulan los estilos declarados en las capas.
Esto es así porque las capas tienen una menor relevancia que los estilos declarados fuera de ellas. No importa el orden, por lo que esto sucederá aunque los estilos de fuera de las capas estén declarados antes que las capas. Los estilos de fuera de las capas son interpretados como si fueran parte de una última capa final.
Las declaraciones importantes
¿Qué ocurre cuando en una capa en concreto se usa la expresión !important? Esta expresión sirve para dar mayor importancia a las declaraciones, anulando o sobreescribiendo a las demás, y también tiene efecto cuando se trabaja con capas de cascada. Por tanto, hay que tenerla en cuenta.
Si se usa la expresión !important en una propiedad CSS de una capa que tenga menor relevancia, prevalecerá por encima de las capas de mayor relevancia o declaradas más adelante. Es decir, que !important anulará el comportamiento de la especificidad agrupada en capas descrito en este artículo.
Por ejemplo, si en una primera capa que es la menos relevante añadimos la expresión !important, la regla CSS que la contenga anulará el valor de reglas contenidas en capas posteriores.
