@layer 让你显式声明层叠顺序：@layer base, lib, app; 业务代码写进具名层后，层叠规则从玄学变成声明式——后声明的层优先级更高，未分层的普通样式优先级最高、可以随时兜底压过分层样式。这直接解决了引入第三方 UI 库时它自带样式与业务自定义样式互相踩踏、只能靠选择器特异性或 !important 硬怼的老问题。
典型用法是把 reset 放 base 层、组件库放 lib 层、业务覆盖放 app 层，三行声明确定优先级顺序，无需研究选择器特异性。Layer 的顺序声明必须出现在所有具名规则之前，否则后面声明的层优先级会反直觉。浏览器支持已经普及到现代主流环境，旧项目改造时配合降级工具平滑过渡即可，是 CSS 工程化里难得的帕累托改进。
<style> @layer base, app; /* app 层优先级高于 base */ @layer base { .btn { border-radius: 4px; padding: 8px 16px; } } @layer app { .btn { border-radius: 999px; background: #4a9eff; color: #fff; } } </style> <button class="btn">app 层覆盖 base 层的圆角</button>