@layer 不能彻底解决样式冲突，仅控制层间优先级，不绕过选择器特异性，也不自动收编第三方样式；其生效需严格满足声明位置、构建工具支持、第三方样式显式归属等条件。
不能“彻底解决”样式冲突覆盖，@layer 只控制层间优先级，不绕过选择器特异性，也不自动收编第三方样式——它是一套需严格配合的机制，不是开关。
层名声明必须在 CSS 文件最顶部
浏览器解析时，一旦遇到第一个非 @layer 规则（哪怕是一行注释、一个空格、@import 或 * { margin: 0; }），后续所有 @layer 声明都会被静默忽略。DevTools 的 Styles 面板里根本不会显示层名，Computed 面板也查不到来源。
-
@layer reset, base, components, overrides;必须是整个 CSS 文件或标签的第一条语句 -
@charset "UTF-8";是唯一允许出现在它前面的内容，且必须是第一行 - Vite/webpack 项目中若未启用
postcss-cascade-layers插件，旧版 PostCSS 会直接删掉整条@layer语句，不报错也不警告
第三方样式必须显式归属某一层
直接 或裸 @import "antd.css"; 引入的样式，默认落入「未命名顶层」，其优先级天然高于你所有命名层。这不是 bug，是规范行为。
- 正确做法：用顶层
@import url("antd.css") layer(framework);（注意 URL 必须带引号，括号内只能填已声明的层名，不能加引号或逗号） - 若库不支持
layer()（如老版本 Element Plus），只能手动复制其 CSS 内容，粘贴进@layer framework { /* paste here */ } - 某些现代库（如 Chakra UI v2.8+、Bootstrap 5.3+）已原生导出
@layer chakra;等，但需确认层名是否与你项目中重复或大小写不一致
@layer 不豁免选择器特异性
@layer 只决定“哪一层的规则能参与本轮计算”，不改变层内规则的胜负逻辑。同一层里，#header .btn（特异性 0,1,1,0）依然赢过 .btn.custom（0,0,2,0）；跨层时，@layer overrides { .btn } 能压过 @layer framework { .ant-btn }，但压不过 @layer framework { #modal .ant-btn }。
- 验证方式：打开 DevTools → Computed 面板 → 看被划掉规则右侧的
Specificity值（格式如0,0,2,0） - 覆盖高特异性第三方规则时，必须同步升级你的选择器，例如写
@layer overrides { .ant-btn.ant-btn-primary.my-theme }，而非仅加一个类名 -
!important在跨层时会失效，且破坏层设计意图，别用
媒体查询必须嵌套在层内才生效
单独写的 @media (min-width: 768px) { .card { display: grid; } } 不属于任何层，仍落在未命名顶层，会压垮你所有命名层中的同选择器普通规则。
- 正确写法：
@layer components { @media (min-width: 768px) { .card { display: grid; } } } - 层序永远先于媒体查询匹配：即使
@layer overrides中只写了桌面断点，它也会覆盖@layer framework中所有匹配该断点的规则——包括本不该生效的移动断点规则 - 安全策略：对关键响应式组件，统一使用相同断点范围，或补全所有区间（如同时覆盖
max-width: 600px和min-width: 601px）
真正难的不是写 @layer，而是让所有样式——尤其是第三方和构建产物——都严格进入命名层；稍有遗漏，就退回传统层叠逻辑。很多问题不是 @layer 失效，而是它根本没被加载进来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
