小程序中 .button 被第三方组件样式覆盖，因 WXSS 是全局作用域，裸名类会跨组件匹配；BEM 类名在 styleIsolation: 'isolated' 下仍失效，因隔离机制阻断样式穿透，需父组件显式配置 "styleIsolation": "shared" 或 "apply-shared"。
小程序里写 .button 为什么总被第三方组件样式覆盖
因为 WXSS 是全局作用域，.button 这种裸名一旦在任何地方定义（包括 app.wxss、第三方组件、甚至开发者工具自动注入的调试样式），就会匹配所有带该 class 的节点——哪怕你只打算用在自己的登录按钮上。常见现象是：改了自己写的 .button 颜色，结果 van-button 或 uni-button 也跟着变；或者新引入一个 UI 库后，原有按钮边框突然消失。
为什么 styleIsolation: 'isolated' 下 BEM 类名照样失效
BEM 只是命名约定，不改变 WXSS 的作用域行为。小程序的 styleIsolation 才是真正控制样式是否能进入子组件的开关。如果你在自定义组件里写了 .user-card__avatar--large，但父组件没配 styleIsolation: 'shared' 或 'apply-shared'，那这条规则根本不会被子组件解析——DevTools 里都看不到它出现在 computed styles 中。
小程序管理平台系统源码
下载
小程序管理平台系统源码是一套面向小程序服务商的一站式管理程序，基于 uniapp + ThinkPHP（PHP）开发，支持微信小程序、微信公众号与 H5 端。系统主打"全开源、独立部署、无限开 SAAS 账号"，适合需要集中管理多个小程序、为客户代开通与授权的小程序服务商使用。
- 必须在**父组件的
json文件**中显式声明："styleIsolation": "shared"（或"apply-shared"） -
isolated是默认值，等于主动关上门；BEM 类名再规范也进不去 -
apply-shared比shared更安全：它只让父组件样式穿透到子组件，子组件自己的样式仍隔离
__ 和 -- 写反了会怎样？
错用不是“不好看”，而是样式直接不生效或行为错乱。WXSS 不报错，但浏览器匹配失败。
-
user-card--avatar❌：把实体元素当状态修饰符，--avatar在语义上无法表达“这是头像”，且 JS 控制时无法和user-card关联 -
user-card__large❌：把尺寸当结构部件，后续加--dark就变成user-card__large--dark，逻辑割裂 - 正确写法只有两种：
user-card__avatar（结构归属）、user-card--large（块级状态）或user-card__avatar--large（元素级状态） - SCSS 中禁用
&__item { ... }嵌套——它掩盖真实 DOM 层级，导致 JS 查询.user-card__avatar时可能命中其他模块同名类
第三方组件里怎么用 BEM 不破沙箱
你不能改 van-button 的 class，但可以限定它的作用范围，让它只在你的模块内生效。
- 别写
.van-button，改用上下文锚定：.profile-form__submit .van-button或更稳妥的属性选择器：.profile-form [class*="van-button"] - 动态插入的弹窗（如
van-popup挂载到body）需在外层容器加 block 名：<view class="profile-form">...</view>，然后用.profile-form:deep(.van-popup)穿透（注意：仅在styleIsolation: 'shared'下有效） - JS 添加状态类时，必须走 BEM 命名：
el.classList.add('profile-form__submit--loading')，禁止用'loading'或'active'这类裸名
class 都严格绑定到一个真实 DOM 容器上——漏传一个 user-card，整个 user-card__avatar 就失去归属，等于裸名。 
