@layer能解决响应式样式冲突，是因为它将媒体查询与样式统一纳入命名层并按声明顺序调度优先级，避免未分层规则默认落入高优先级“未命名顶层”导致覆盖。
旧项目响应式样式总被覆盖？不是媒体查询失效，而是它们和重置、组件、工具类混在同一个不可控的“未命名顶层”里——@layer 能把它们拎出来，按明确顺序排好队。
为什么你的 @media 规则总被盖掉
浏览器把没套 @layer 的 @media 规则默认扔进“未命名顶层”，它天然高于你所有显式声明的层（比如 @layer components）。哪怕你写了 @layer overrides，只要没把 @media 套进去，它就压根不参与层序比对。
- 错误写法：
@layer overrides;然后单独写@media (min-width: 768px) { .card { padding: 2rem; } }→ 这条规则不在任何层里，属于 unlayered - 正确写法：
@layer overrides { @media (min-width: 768px) { .card { padding: 2rem; } } } - 更稳妥做法：用
@import "bootstrap.css" layer(framework);把整个框架塞进framework层，再在靠后的@layer overrides里写修复
@layer 声明顺序必须前置且完整
层名声明（如 @layer reset, base, components, responsive, utilities;）必须出现在所有带花括号的 @layer 块之前，且只能在 CSS 顶层写——不能嵌套在 @media 或 @supports 里，也不能动态插入。
- ✅ 正确：先集中声明所有层名，再分块填充内容
- ❌ 错误：在
@layer components { ... }后补一句@layer theme;→ 浏览器会把它当独立隐式层，优先级失控 - ⚠️ 注意：
@import引入的 CSS 若含@layer，其层序按@import位置算，不是文件加载时间
第三方库怎么“收编”进你的层体系
多数构建产物已剥离 @layer 声明，直接 @import url("tailwind.css") layer(utilities); 没用——得确认库是否原生导出分层样式。
立即学习“前端免费学习笔记（深入）”；
- Tailwind v3.4+ 支持
@layer base, components, utilities;，但需开启content扫描并配置layer选项 - Chakra UI v2.8+ 默认导出
@layer chakra;，可直接写@layer chakra, overrides; - Bootstrap 5.3+ 已原生支持，可用
@layer bootstrap { @import "bootstrap/scss/bootstrap.scss"; } - 不支持的库（如 Ant Design），用
@layer vendor { @import "ant-design.css"; }强制包裹，再靠层序确保它排在你自定义层之前
响应式断点在层内怎么写才安全
层序永远先于媒体查询生效条件。浏览器先按层决定“哪组规则能参与本轮计算”，再在该层内执行媒体查询匹配。这意味着：即使你在 @layer overrides 里只写了桌面断点，它也会覆盖 @layer framework 中所有匹配该断点的规则——包括那些本不该生效的移动断点规则。
- 典型陷阱：
@layer overrides { @media (max-width: 600px) { .btn { padding: 4px; } } }，但@layer framework里有@media (min-width: 601px) and (max-width: 900px)的同选择器规则 → 后者不会被覆盖，因为它不匹配你的断点 - 安全策略：对关键响应式组件，统一用相同断点范围声明，例如全部用
@media (width >= 600px)（现代语法）或补全所有区间 - 检查方式：DevTools → Elements → 右侧 Styles 面板，看被划掉的规则是否带「layer」标识；没标识的，说明根本没进层
真正麻烦的不是写错一条 @media，而是旧项目里大量 ID 选择器、!important 和深层后代选择器——它们在未分层时权重碾压一切，@layer 只能管住“层间”优先级，管不住层内选择器打架。重构前先扫一遍 !important 和 #，否则分层只是给混乱套了个有序外壳。
