@layer 一个两年前的特性，但是因为兼容性一直没派上用场，经过两年的时间，对于普通用户来讲完全够更新换代，不用太在意兼容性。

@layer 目前来讲最大的作用就是多个模块或者说引入外部包时，更便于控制样式的优先级。在此之前如果想覆盖一个样式设置，只能通过加权累加选择器的权重，权重大于时生效，或者用 important 强制覆盖。

而现在，只需要把样式代码置入不同的 @layer 中，那么后面的在正常情况下优先级永远比前面的高，类似于一票否决，甚至于还可以单独指定每个 @layer 的权重顺序。

可以嵌套使用

@layer framework {
    @layer layout {}
}

可以多次声明

@layer framework.layout {}

可以 @import 导入使用

/* test.css */
@layer utilities {
    .padding-sm {
      padding: 0.5rem;
    }

    .padding-lg {
      padding: 0.8rem;
    }
}

/* app.css */
@import url(test.css);
@import url(test.css) layer(tools); /* tools.utilities */

简单总结下规则：
@layer 优先级按照前后顺序匹配，靠后的优先(无视规则匹配优先级，important 除外)
@layer 优先级可以手动指定顺序，同样也是靠后的优先（ @layer layer1,layer2; ）
@layer 优先级比普通匹配规则优先级低

除了 @layer 外，还有一组新增的选择器也很好用:has,:not,:is,:where，而且还可以组合起来用，算是半个动态查询的感觉（或者可以叫预设），可以实现很多之前需要借助 JavaScript 才能实现的样式。

另外就是也终于支持了原生嵌套，最开始用 SASS 或 LESS 其实就是奔着这个的，后来才用上变量和函数之类的东西。

以上这些特性，在 2023 年之后的浏览器上都已经完全支持了，但是如果还需要兼容 2022 年之前的浏览器，那么我还是推荐使用 SASS 这种预处理语言。