移动端必须将@layer置于css文件最顶部，因webview碎片化、sdk动态注入和热更新会破坏级联机制；错位的@layer被浏览器静默忽略，且第三方样式默认进入未命名顶层，需构建时预包裹或运行时拦截注入。
移动端用 @layer 不是为了“更规范”，而是不这么做，你根本没法确定哪条样式生效——WebView 版本碎片、SDK 动态注入、热更新打乱 CSS 顺序，三者叠加后，传统级联机制已经失效。
为什么移动端必须把 @layer 放在 CSS 文件最顶部？
浏览器解析器遇到第一个非 @layer 规则（比如 * { margin: 0; } 或 .btn { color: red; }）后，会直接忽略后续所有 @layer 声明。DevTools 的 Styles 面板里看不到层名，Computed 里也查不到来源，只留一堆“明明写了却不起作用”的困惑。
-
@layer reset, base, vendor, app;必须是整个 CSS 文件或<style></style>标签的第一行，前面不能有空行、注释、@charset或任何其他语句 - Webpack/Vite 构建时若启用了 CSS 压缩（如
css-minimizer-webpack-plugin），某些配置会把@layer移到中间——必须检查输出产物是否保留原始顺序 - 移动端 Safari iOS 18.4 和 Chrome Android 130+ 会静默忽略错位的
@layer，连警告都不抛
第三方 SDK 样式（如神策、GrowingIO）怎么收进 @layer？
它们几乎从不走 @import url(x.css) layer()，而是 JS 动态插入裸 <style></style>，默认落在「未命名顶层」，天然压过你所有显式 @layer。这不是 bug，是规范行为。
- 正确做法：用构建脚本读取
antd-mobile.css内容，包裹进@layer vendor { /* paste here */ }，再注入<style></style> - 省事替代：改用支持原生
@layer导出的库，比如 Ant Design Mobile v6.2+ 提供antd-mobile/css/layers.css，可直接@import "antd-mobile/css/layers.css" - 绝对不要写
@layer vendor { @import "antd-mobile.css"; }——@import不能嵌套在层块内，会被忽略
如何让业务样式稳稳压过 UI 库的高权值选择器？
@layer 只控制层间优先级，不豁免层内选择器特异性。同一层里，#modal .ant-btn（0,1,1,0）依然赢过 .ant-btn.my-theme（0,0,2,0）；跨层时，@layer app { .ant-btn } 能压过 @layer vendor { .ant-btn }，但压不过 @layer vendor { #modal .ant-btn }。
- 覆盖第三方规则时，必须同步升级选择器：用
@layer app { #modal .ant-btn.primary }，而不是只写.my-button - 禁用
!important：它在跨层场景下完全失效，且绕过层机制，让规则脱离你的分层设计 - 打开 DevTools → Computed 面板 → 看被划掉规则右侧的
Specificity值（格式如0,1,0,0），确认你写的规则是否真被层序保护住
真正容易被忽略的点是：层声明顺序和第三方样式注入时机必须对齐。比如 PWA 桥接层在页面加载后动态插入全局样式，哪怕你 @layer 写得再准，它仍会落在未命名顶层——这时只能靠构建阶段预包裹，或 runtime 拦截 document.head.appendChild 并重写为带 data-layer 的 <style></style>。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
