CSS层叠层（@layer）通过分组命名和显式排序解决多来源样式冲突，使开发者可控层叠优先级，避免滥用!important或提高选择器权重。
什么是CSS层叠层（@layer）能解决的冲突
当多个CSS来源（比如框架样式、组件库、自定义主题、内联样式）同时作用于同一个元素，浏览器靠层叠顺序（cascade origin + specificity + order）决定最终样式——但这个顺序难预测、难调试。@layer不是覆盖或重写规则，而是给CSS规则“分组命名+显式排序”，让开发者掌控层叠优先级，而不是靠拼命加!important或改选择器权重硬扛。
典型症状：button { color: blue; }在某个组件里死活不生效，DevTools里看到它被另一处.btn-primary { color: red; }盖掉了，但那条规则根本不在你代码里——大概率来自第三方CSS文件，且加载顺序比你的晚。
怎么用@layer声明和排序样式层
必须先声明层名，再往里塞规则；声明顺序 = 层叠优先级顺序（越靠前，优先级越低）：
@layer reset, base, components, utilities;
之后所有带@layer前缀的规则，都会归入对应层：
@layer reset {
* { margin: 0; padding: 0; }
}
@layer base {
button { background: #eee; }
}
@layer components {
.modal-button { color: red; }
}
- 没加
@layer的普通CSS规则，属于“未命名层”，它的优先级 高于所有已命名层（包括最后声明的那个），这点极易踩坑 - 同一层内规则仍按原有层叠逻辑（选择器权重、顺序）生效，
@layer只管层间排序 - 层名可以嵌套，比如
@layer components.button;，但只推荐用于大型项目拆分，小项目平铺更清晰
为什么@layer比!important或提高选择器权重更可靠
!important会破坏可维护性：一旦第三方库也用它，你就得用更多!important对冲；提高选择器权重（比如把button改成body button）会让样式耦合变强，迁移困难。
而@layer是结构化控制：
- 第三方库若支持
@layer（如Tailwind CSS v3.1+默认启用），它会把自己的规则放进@layer utilities等固定层，你只需确保自己的@layer components声明在它之后，就能稳稳覆盖 - 浏览器原生支持（Chrome 99+、Firefox 97+、Safari 15.4+），无需构建工具转译，但旧版需回退方案
- 层名本身不产生样式，只影响层叠顺序，所以不会意外改变渲染结果
容易忽略的兼容性和加载顺序陷阱
最常出问题的是加载时机和回退处理：
-
@layer声明必须出现在任何使用该层的规则之前；如果CSS是动态insertRule注入的，必须先注入声明语句 - 不支持
@layer的浏览器（如IE、老版Edge）会直接忽略整条@layer语句，里面规则也不生效——所以不能把关键基础样式全塞进@layer，得留一层无层CSS兜底 - Vite/Webpack等工具默认不处理
@layer，但PostCSS插件postcss-layer-grid或cssnano新版可安全压缩，不用手动禁用 - 如果你用
import方式引入多个CSS文件，各文件里的@layer声明是独立作用域的，必须在一个文件里集中声明所有层名，否则排序失效
真正麻烦的从来不是语法，而是团队协作时有人忘了声明层、或者把关键重置样式写在了未命名层里——结果上线后发现按钮颜色随机切换。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
