@layer 不能彻底解决样式冲突，它仅控制层间优先级，层内仍需靠选择器特异性决胜；第三方样式须显式归属某层、自定义层声明靠后且特异性足够高，否则无法覆盖如 .ant-btn 等高特异性规则。
@layer 不能彻底解决样式冲突，它只提供层序控制权——真正生效的前提是：第三方样式必须显式归属某一层、你的自定义层声明靠后、且选择器特异性足够高。
为什么写了 @layer custom 还是盖不住 .ant-btn？
因为 @layer 只管“层间”优先级，不管“层内”胜负。.ant-btn.ant-btn-primary 的特异性是 0,0,2,0，而你写 .my-button（0,0,1,0）哪怕放在 @layer custom 里也输。
- 打开 DevTools → Computed 面板 → 看被划掉规则右侧的
Specificity值（如0,0,2,0） - 不要幻想靠层跳过特异性：得同步升级选择器，比如
@layer custom { .ant-btn.my-theme { } } -
!important在跨层时会失效，且破坏层设计意图，别用
第三方 CSS 怎么塞进 @layer？
像 Bootstrap、Tailwind 这类不自带 @layer 的库，必须用 @import url("") layer(base); 包裹，但有硬性限制：
- 路径必须可解析（Vite/webpack 别名要生效，CDN 地址必须带
https://） -
layer()括号里只能填一个已声明过的层名，比如layer(reset)，不能写layer("reset")或layer(reset, base) - 如果库本身已含
@layer utilities，再套layer()会报错，此时应改用@layer utilities { @import ""; }手动包裹 - 构建工具若没启用
postcss-cascade-layers插件，旧版 PostCSS 会直接删掉整条@layer语句，连警告都不给
@layer 声明位置错一毫，整个机制就失效
浏览器解析 CSS 时，遇到第一个非 @layer 规则（比如 * { margin: 0; } 或 .btn { color: red; }）后，后续所有 @layer 声明都会被忽略——DevTools 的 Styles 面板里根本不会显示层名，Computed 面板也查不到来源。
-
@layer reset, base, components, utilities;必须放在整个 CSS 文件或<style></style>标签的最顶部，前面不能有任何其他 CSS 规则 - 多个文件中重复声明同一层（如都写
@layer theme;），内容会自动合并，但规则插入顺序仍按文件加载顺序，不是声明顺序 - 用
@import加载含@layer的 CSS 时，导入语句本身不触发层声明，需确保被导入文件顶部已有@layer xxx;
别用匿名层 @layer { } 处理第三方样式
匿名层无法复用、不可重排序，和命名层混用极易导致覆盖失效。第三方库若同时用了命名层和裸样式（比如 reset 部分没进 @layer），你的匿名层对那部分完全无效。
- 正确做法：在项目最顶层统一声明命名层，例如
@layer framework, base, components, overrides; - 把第三方样式全部收编进
@layer framework { }，而不是放任它落在未命名顶层 - 关键响应式规则必须嵌套在对应
@layer块内，例如@layer responsive { @media (min-width: 768px) { ... } }，否则媒体查询默认处于最高优先级的未命名顶层
真正难的不是写对语法，而是团队能否统一约定哪些样式进哪一层、谁有权修改层声明顺序——一旦分层逻辑散落在多个文件又没人维护，@layer 反而会让调试更混乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
