2022年引人注目的CSS @layer特性究竟有何独特之处？

本文共计4091个文字，预计阅读时间需要17分钟。

2022年，CSS新特性层出不止，其中最引人注目的是CSS圆角的新特性。不同于CSS @layer，CSS @layer属性并不属于CSS @layer规范。本文将用最简洁的语言，快速帮助读者理解CSS @layer新规范。

CSS @layer新规范，允许开发者通过层叠规则，更好地管理和组织CSS样式。简单来说，CSS @layer可以看作是一个新的层，在这个层中定义的样式，会根据层叠优先级影响到其他层。这样，开发者可以更灵活地控制样式的优先级，实现复杂的样式效果。

步入 2022，CSS 的新特性层出不穷，而最近在 CSS 圈最受瞩目的新特性，非 CSS @layer 莫属。

本文，将用最简洁的语言，快速让读者们搞懂，到底什么是 CSS @layer 新规范。

过往 CSS 优先级中存在的问题

如果我们的页面上存在非常多的样式，譬如有我们开发页面的时候的自定义样式，也有引入的组件库样式。这时候样式将会非常混乱难以管理。

当我们想覆盖一些本身非我们书写的样式时候，往往不得不通过使用优先级权重更高的样式名，去覆盖那些样式。

同时，当样式优先级感到难以控制时，开发者习惯滥用 !important 去解决，这又循环导致了后续更混乱的样式结构。

基于让 CSS 得到更好的控制和管理的背景，CSS @layer 应运而生。

何为 CSS @layer？

CSS @layer 从 CSS Cascading and Inheritance Level 5 被规范定义。

何为 CSS @layer？简单而言，CSS @规则 中的@layer声明了一个 级联层， 同一层内的规则将级联在一起， 这给予了开发者对层叠机制的更多控制。