bem无效的根本原因是styleisolation未显式配置，必须在父组件设为'shared'或'apply-shared'，否则bem类名无法进入子组件作用域；::v-deep需配合bem上下文使用，且修饰符位置不可错。
styleIsolation 必须显式配置，否则 BEM 无效
BEM 是命名规范，不是隔离机制。你在 .user-card__avatar 上写得再精准，如果父组件没开样式穿透通道，这条规则根本不会进入子组件的 computed styles。DevTools 里看不到它，浏览器压根不解析。
必须在**父组件（即你写样式的地方）** 的配置中显式声明：styleIsolation: 'shared' 或 styleIsolation: 'apply-shared'。默认值 'isolated' 就是关着门，BEM 类名再长也敲不开。
-
'shared'：双向穿透，页面样式进组件，组件样式也出到页面——易污染，慎用 -
'apply-shared'：单向安全，只让页面样式影响子组件，子组件样式仍隔离——推荐作为默认策略 - 别在
app.json或全局app.vue里统一设shared，否则整个项目样式边界塌陷
::v-deep 需配合 BEM 类名使用，不能靠裸名匹配
写了 ::v-deep .button 却没生效？问题不在选择器语法，而在目标类名本身太泛。小程序里 .button 可能被 van-button、uni-button、甚至开发者工具注入的调试样式同时命中，结果是样式乱套或完全不匹配。
正确做法是把穿透目标锚定在 BEM 块上，用上下文限定范围：
- 错：
::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 的父组件才起效。
BEM 修饰符写错位置，样式直接不触发
WXSS 不报错，但写反了 __ 和 -- 就等于没写。比如把状态当成结构部件：.card__large，或把元素当成块级状态：.card--avatar，浏览器无法按 BEM 规则解析，选择器匹配失败。
-
block__element表示“属于这个块的某个具体部分”，如card__header、card__footer -
block--modifier表示“块的整体状态切换”，如card--mobile、card--collapsed -
block__element--modifier表示“该元素的局部状态”，如card__image--rounded
动态控制时，JS 操作的是类名本身：el.classList.add('card--mobile')，而不是靠 DOM 层级推导。写错层级关系，JS 就找不到目标。
第三方组件不能改 class，只能包一层加 block 名
别试图覆盖 u-button 或 uni-popup 的内部类名——它们是黑盒，更新后类名可能变，你的 CSS 就废了。BEM 的安全用法是“围而不破”：用 block 名包裹第三方组件，把样式作用域收束在容器内。
- 模板中：
<view class="profile-form"><u-button>提交</u-button></view> - 样式中：
.profile-form ::v-deep .u-button { padding: 0 24rpx; } - 弹窗类特殊处理：
.profile-form:deep(.u-popup)（注意小程序里需确认构建工具是否支持:deep()语法，否则回退用属性选择器）
真正容易被忽略的点是：动态挂载到 body 的节点（比如 popup、toast）脱离原始 DOM 上下文，必须靠外层容器的 block 类名 + 属性选择器兜底，否则 ::v-deep 失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
