bem类名在小程序中必须配合styleisolation显式设为'shared'或'apply-shared'才生效，否则因默认'isolated'模式被锁死；::v-deep需锚定block类名使用，第三方组件须用wrapper承载并赋予真实block名。
styleIsolation 必须显式设为 shared 或 apply-shared
BEM 类名在小程序里根本不会生效，除非父组件主动打开样式穿透通道。默认的 isolated 模式会把所有类名锁死在组件内部，.user-card__avatar 再标准也进不了子组件的 computed styles。
必须在写 BEM 样式的那个组件（通常是页面或业务容器）的配置中明确声明：
-
styleIsolation: 'shared'：双向穿透，风险高，仅用于极简 demo -
styleIsolation: 'apply-shared'：推荐默认值，只允许页面样式影响子组件，子组件样式仍隔离 - 绝对不要在
app.json或全局app.js里统一设shared，否则整个项目样式边界塌陷
::v-deep 必须锚定在 Block 类名下使用
裸写 ::v-deep .van-button 是无效的——它不带上下文，会命中所有含 van-button 的节点，包括第三方调试注入的样式，结果是样式乱套或完全不触发。
正确做法是用 Block 名作为作用域锚点：
- 错：
::v-deep .van-button { color: red; } - 对：
::v-deep .profile-form__submit .van-button - 更稳：
::v-deep .profile-form [class*="van-button"]（避开类名拼写依赖）
注意：微信原生小程序不支持 /deep/ 或 >>，只认 ::v-deep，且仅在 Vue 场景 + styleIsolation 启用后才起效。
第三方组件不能改 class，只能包一层加 Block 名
别试图给 <u-button></u-button> 加 form__u-button 这类伪 BEM 类名。它不是你项目的 Block，硬套会破坏封装、阻断升级、导致 lint 报错。
正确路径只有一条：用 wrapper 元素承载第三方组件，并赋予真实 Block 名：
- HTML：
<div class="search-form"><u-button class="search-form__submit"></u-button></div> - CSS：
.search-form__submit控制尺寸/间距等外层关系，不碰u-button内部结构 - JS 动态控制时，只操作
search-form__submit类名，状态变更靠修饰符如search-form__submit--loading
修饰符位置错一个字符，样式就等于没写
WXSS 不报语法错误，但写反 __ 和 -- 就等于选择器失效。比如 .card__large（把修饰符当元素）、.card--avatar（把元素当块级状态），浏览器无法按 BEM 规则解析。
三类合法结构必须严格区分：
- Block 状态：
.card--mobile、.card--collapsed - Element 结构：
.card__header、.card__footer - Element 状态：
.card__image--rounded、.card__avatar--loading
动态 JS 操作时，el.classList.add('card--mobile') 是对的；el.classList.add('card__mobile') 或 el.classList.add('--mobile') 都找不到目标——BEM 的层级和连接符就是运行时查找依据，不是命名装饰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
