概述`@layer` 通过定义层级与顺序来管理样式覆盖关系。可将基础、组件与主题样式分层,降低选择器权重竞争与不可控覆盖。用法/示例@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/@layerweb.dev:Cascade layers — https://web.dev/articles/cascade-layers

发表评论 取消回复