@layer 是 CSS 原生层叠管理机制，解决大型项目中第三方库、组件与主题样式优先级失控问题；它通过声明顺序定义层级优先级，后声明的 layer 覆盖前层同名规则，层内仍遵循传统权重规则。
什么是 @layer，它解决什么问题
@layer 是 CSS 原生的层叠管理机制，2022 年起逐步被主流浏览器支持（Chrome 104+、Firefox 106+、Safari 17.4+）。它不是用来“提升单个元素层级”的工具，而是为整套样式规则划分逻辑层级，解决大型项目中第三方库、组件样式、主题覆盖等场景下的优先级失控问题。
典型痛点：你写了 .btn { color: blue }，但引入的 UI 库里有同名类且用 ID 选择器或高权值写法覆盖了它，改又不敢动库，加 !important 又污染全局。这时候靠手调选择器权重或硬塞 !important 已经不可持续——@layer 提供的是结构化分层能力。
@layer 的声明顺序决定最终优先级
同一份 CSS 中，@layer 的声明顺序（不是使用顺序）决定其层级高低：后声明的 layer 优先级更高，其内部规则天然覆盖前面 layer 的同名规则。
-
@layer reset { * { margin: 0; } }—— 最底层，重置通用样式 -
@layer base { .text { font-size: 1rem; } }—— 中间层，基础组件样式 -
@layer components { .text { font-size: 1.125rem; } }—— 顶层，业务组件定制
上面三行代码中，.text 最终生效的是 components 层里的定义，哪怕 base 层用了更复杂的选择器，也无效。这是 @layer 的核心规则：层间优先级由声明顺序决定，层内才按传统选择器权重比。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
嵌套 @layer 和匿名层的写法差异
你可以显式命名 layer（如 @layer utilities），也可以用匿名层（@layer { ... }）快速包裹一段样式。但注意：
- 匿名层会按出现顺序参与排序，但无法被其他地方复用或注入
- 命名层支持跨文件声明：比如在
main.css写@layer theme;，在dark.css写@layer theme { body { background: #111; } }，后者自动归入theme层并覆盖前者 - 嵌套写法如
@layer framework { @layer base { ... } }是非法的——@layer不支持嵌套声明，只支持平级分组
常见误用：@layer ui { .btn { z-index: 10; } } 然后期望它能压过其他未进 layer 的定位元素——不行。z-index 生效依赖定位上下文，和 @layer 无关；@layer 只管“哪条 CSS 规则胜出”，不干预渲染层叠上下文。
与 !important、传统权重的共存关系
@layer 不否定原有优先级体系，而是叠加一层新维度：
- 不同 layer 的规则之间：只看 layer 声明顺序，无视选择器权重和
!important - 同一 layer 内部：完全遵循传统规则——ID > class > tag，
!important仍可翻盘，但仅限本 layer 内 - 未进入任何
@layer的样式（即“unlayered”样式）：优先级最低，等价于最顶层显式声明的@layer之后再声明的一层
也就是说，如果你没声明任何 @layer，所有样式都属于 unlayered 层；一旦你写了 @layer a;，那所有 unlayered 样式就自动排在 a 后面——这点容易被忽略，导致迁移时样式意外降级。
