@scope目前不能当主力用，因其仅Chrome 125+和Safari 17.4+支持，iOS 17.4以下及国内Android WebView普遍不识别，SSR工具链解析也不一致；真正在移动端稳住样式的仍是BEM+显式类名+避开宿主注入点。
直接用 @scope 最省事，但目前仅 Chrome 125+ 和 Safari 17.4+ 支持，生产环境不能单独依赖；真正在移动端稳住样式边界的，还是 BEM + 显式类名 + 避开宿主注入点这三板斧。
为什么 @scope 现在还不能当主力用
@scope 确实是原生作用域方案，写法也干净：
.card { @scope (.card) to (.card__content); }
@scope (.card) {
.card__title { font-size: 16px; }
&__content { padding: 12px; }
}
但它在移动端有两个硬伤：
- iOS 17.4 以下（含绝大多数存量 iOS 设备）完全不识别，解析器直接跳过整段规则
- Android WebView 基于 Chromium，但国内厂商（X5、Uc、华为）普遍卡在旧版内核，
@scope规则被静默丢弃，连警告都不报 - Vue/React 的 SSR 渲染中，服务端 CSS-in-JS 工具链（如 Linaria、Astro）对
@scope解析支持不一致，容易漏生成
BEM 类名必须显式写死，禁用 JS 拼接和 scoped 属性
混合 App 中样式“突然变灰”“按钮消失”，90% 是宿主注入了 .text { color: #666 !important; } 这类全局规则，而你的 class="card__title" 正好撞上。
立即学习“前端免费学习笔记（深入）”；
所以 BEM 不是命名习惯，是防御策略：
- 所有类名必须静态出现在模板里：
<div class="user-card__title">，禁止 <code>el.className = 'user-card__' + type - 禁用 Vue 的
<style scoped></style>：它生成的div[data-v-xxx] .user-card__title会被宿主 JS 脚本忽略，且无法被原生 WebView 的样式注入机制识别 - uni-app/Taro 项目中，关掉 CSS Modules 的自动哈希，确保最终 HTML 里类名就是你写的原始字符串
- 用容器包裹：
<div class="popup-wrapper"><van-popup></van-popup></div> - CSS 写成：
.popup-wrapper :global(.van-popup) { z-index: 9999; }，只穿透一层，不污染全局 - 必要时补一层层叠上下文：
html .popup-wrapper { contain: layout paint; }，防止宿主transform或opacity干扰隔离效果 - 元素不能是
display: inline或position: static—— 推荐设为display: block或display: flex - 不能在 JS 创建节点后立刻加
contain—— 要等requestAnimationFrame后再设，确保样式已计算完成 - 祖先元素不能有
will-change: transform、backdrop-filter或opacity: 0.99—— 这些会提前创建层叠上下文，把你的contain包进去，等于白写
第三方弹窗（如 van-popup）挂载到 body 怎么办
这类组件绕过组件树，直接插进 ，BEM 类名还在，但 scoped 或 CSS Modules 完全失效。
解法不是加 !important 硬顶，而是控制插入点和层叠上下文：
contain 属性要生效，得先过三层检查
写了 contain: content 却没减少重绘？大概率是浏览器根本没启用隔离。它不是开关，是契约，必须同时满足：
验证是否生效，唯一靠谱的方式是打开 Chrome DevTools 的 «Layers» 面板，找 “Isolated Layer Root” 标识；没看到，说明声明被忽略了，不是性能问题，是隔离压根没建起来。
