CSS Cascade Layers：@layer 样式层级治理

## 概述 `@layer` 通过定义层级与顺序来管理样式覆盖关系。可将基础、组件与主题样式分层，降低选择器权重竞争与不可控覆盖。 ## 用法/示例 ```css @layer base, components, theme; @layer base { button { all: unset } } @layer components { .btn { padding: 8px 12px } } @layer theme { .btn { background: #4f46e5; color: #fff } } ``` ## 工程建议 - 统一在入口处声明层级顺序，避免分散声明导致不可预期覆盖。 - 与设计系统协作定义层语义，减少选择器权重堆叠。 - 对第三方样式设专属层并限制覆盖范围。 ## 参考与验证 - MDN：Cascade layers — https://developer.mozilla.org/docs/Web/CSS/@layer - web.dev：Cascade layers — https://web.dev/articles/cascade-layers