2022年最受关注的CSS@layer新特性是什么？

步入2022年，CSS的新特性层出不穷，而最近最受CSS圈关注的新特性非CSS@layer莫属。本文将用最简洁的语言，让读者快速了解什么是新的CSS@layer规范。以前CSS优先级的问题如果我们的页面有很多样式，比如我们开发页面时自定义的样式，导入的组件库样式等。这时候风格会很乱，不好打理。当我们想要覆盖一些不是我们自己写的样式时，我们往往不得不使用具有更高优先级权重的样式名称来覆盖这些样式。同时，当样式优先级感觉不可控时，开发者习惯于滥用!important来解决，这反过来又导致日后样式结构更加混乱。CSS@layer诞生于让CSS能够更好地被控制和管理的背景下。什么是CSS@layer？CSS@layer由CSSCascadingandInheritanceLevel5[1]的规范定义。什么是CSS@layer？简单的说，CSS[2]中的@layer@rule[3]声明了一个层叠层，同一层中的规则会被层叠在一起，让开发者对层叠机制有更多的控制权。语法也很简单，看这个例子：@layerutilities{/*Createacascadelayernamedutilities*/}这样，我们创建了一个名为@layerutilities的级联层。如何使用@layer层叠层？通过@layer级联层管理样式优先级@layer级联层最大的作用就是控制不同样式之间的优先级。看下面的例子，我们定义了两个@layer级联层A和B：

div{width:200px;高度：200px；}@layerA{div{背景：蓝色；}}@layerB{div{背景：绿色；}}因为@layerB的顺序在@layerA之后，所以@layerB中的所有样式都会比@layerA有更高的优先级，最终的div颜色会是绿色：当然，如果@layer太多的话在页面中，可能不容易记住所有@layers的顺序，所以有另一种写法。我们可以同时命名多个@layer层，然后在其中补充样式规则。@layerB,C,A;div{width:200px;高度：200px；}@layerA{div{背景：蓝色；}}@layerB{div{背景：绿色；}}@layerC{div{背景：橙色；}}在上面的代码中，我们首先定义了@layerB、C、A三个@layer级联层。然后在下面的CSS代码中补充每个级联层的CSS代码，但是样式的优先级是：A>C>B。因此，最终的div的颜色值为@layerA中定义的颜色，即蓝色：这里可以很明显的看出CSS@layer的作用。使用CSS@layer，我们可以将不同的CSS模块划分到不同的@layers中，利用顺序可以很好的控制全局样式的优先级。介绍@layer级联层定义的三种方式上面其实提到了介绍@layer级联层定义的两种方式。这里我们再描述一下。CSS@layer层叠层的引入方式一共有3种。直接创建块级的@layer规则，其中包含作用于图层的CSS规则：@layerutilities{p{padding:.5rem;}}可以通过@import[4]创建级联层，规则存在于导入的样式表中：@import(utilities.css)layer(utilities);创建命名层叠层，但不指定任何样式。然后可以在CSS中的任何位置添加样式：@layerutilities;//...//...@layerutilities{p{color:red;}}非@layer包裹层和@layer样式优先级当然，这里还会有另外一种情况，不被@layer包裹的样式优先级与被@layer包裹的样式相比如何？看这样一个例子：@layerA{a{color:red;}}@layerB{a{颜色：橙色；}}@layerC{a{颜色：黄色；}}a{颜色：绿色；}/*没有被@layer包裹的样式*/这里会有一个很重要的结论，就是没有被@layer包裹的样式比被@layer包裹的样式有更高的优先级。因此，上述规则的顺序是：未被@layer包裹的样式>@layerC>@layerB>@layerA。匿名层和嵌套层之间有两种层级关系，分别是匿名层和嵌套层层。匿名层允许创建没有名称的@layer：@layer{p{margin:1rem;}}这里创建了一个匿名层。匿名层的两个重要属性：创建后不能向其添加规则。该层与其他命名层具有相同的功能，优先级也遵循后面定义的匿名层，比其他定义的@layer层具有更高的优先级。看一个例子：div{width:200px;高度：200px；}@layer{div{背景：粉色；}}@layerB,C,A;@layerA{div{背景：蓝色；}}@layerB{div{背景：绿色；}}@layerC{div{背景：橙色；}}在上面的代码中，我们首先定义了一个匿名层，指定div的颜色为粉色，然后定义了@layerB、C、A。这里的优先级顺序是：A>C>B>匿名层。最终的颜色是@layerA中的颜色值——蓝色：如果我们把匿名层放在最后：div{width:200px;height:200px;}@layerB,C,A;@layerA{div{背景：蓝色;}}@layerB{div{背景：绿色；}}@layerC{div{背景：橙色；}}@layer{div{背景：粉色；}}此时，样式的优先级顺序为：匿名层>A>C>B。最终的颜色就是匿名层中的颜色值——粉色：嵌套层说完匿名层，我们来看再次嵌套层。顾名思义，嵌套层就是在@layer内部，我们可以嵌套使用@layer级联层。像这样：@layerA{@layerB{...}}当然，它还有另外一种语法，上面的代码相当于：@layerA.B{...}理解了这个之后，那么，看这样一个例子:div{宽度：200px;高度：200px；}@layerA{div{背景：蓝色；}@layerB{div{背景：红色；我们在@layerA中嵌套了一个@layerB，同时定义了一个div样式。最终div的背景颜色是什么？终于是蓝色背景了：蓝色，为什么？这是一个很好的记忆，我们假设如果没有@layerA这一层的封装，其实就是上面说的@layer层和非@layer层的优先级比较。这里，非@layer层（我们可以理解为@layer的上一层）有更高的优先级。因此，对于单个@layer中的嵌套关??系，样式优先级为：@layerA>@layerA.B.多个嵌套层的优先级关系是可以的，我们来看这种情况：div{width:200px;高度：200px；}@layerA{div{背景：蓝色；}@layerB{div{背景：红色；}}}@layerC{div{背景：黄色；}@layerD{div{背景：绿色；}}}同时嵌套了多个@layers。那么这种情况下优先级是怎么划分的呢？这里的规则是，优先级高的@layer，无论是否嵌套，都比优先级低的@layer（无论是否嵌套）具有更高的优先级。所以这里的优先顺序是：@layerC>@layerC.D>@layerA>@layerA.B。!important对CSS@layer的影响我们来看看!important对CSS@layer的影响。这里可以分为几种情况，先看其中一种：div{width:200px;高度：200px；背景：黑色；}@layerA{div{背景：蓝色；}@layerB{div{背景：红色；}}}@layerC{div{背景：黄色；}@layerD{div{背景：绿色！重要；}}}上面的代码，我们在@layer的