前端与浏览器 / 进阶

CSS 层叠层：用 @layer 管理覆盖关系

解释层叠来源、层顺序和选择器权重的关系，为重置、第三方样式、组件和工具类规划稳定覆盖规则。把优先级写进架构，少靠更长选择器和 !important。

7 分钟Cascade Layers · CSS · Specificity · Architecture

层顺序先于层内权重

后声明优先层中的低权重选择器，可以覆盖早期层中的高权重选择器。因此把难覆盖的第三方 CSS 放进较低层，往往无需与它比拼选择器长度。 !important 的层顺序会反转：较早层的重要声明更强。这是为了保护底层约束，不应把 important 当作常规跨层覆盖手段。

EXAMPLE / 01Cascade Layers

@layer reset, vendor, tokens, base, components, utilities, overrides;

@import url('./vendor.css') layer(vendor);

@layer components {
  .button { background: var(--color-action); }
}

@layer utilities {
  .bg-transparent { background: transparent; }
}

把实现拆成可验证的小块

第三方样式适合放入低优先级层

最后回到真实页面检查

层级应少而稳定，成为样式架构契约