Uni-app 中 BEM 规范需严格约束：Block 名须与组件文件名（小写连字符）强绑定；Element 禁用动词，Modifier 必须预定义且可枚举；JS 中类名须由组件级 BEM 工厂函数生成；第三方组件须用合规 wrapper 隔离。
在 Uni-app 项目中直接套用 BEM 命名，不加约束会迅速失控——user-card__avatar--large 看似规范，但若 user-card Block 文件里混写了 .modal__close，或 JS 中手动拼接 user-card__name--active 而非通过统一函数生成，BEM 就只剩空壳。
Uni-app 组件级 Block 名必须与文件名强绑定
每个 Vue 组件对应一个 Block，且 Block 名必须和组件文件名（不含扩展名）完全一致、小写连字符分隔。比如 UserCard.vue 对应 user-card，不是 userCard 或 card-user。
- 违反后果：
user-card.module.scss里写.button__icon会被 ESLint 插件stylelint-selector-bem-pattern直接报错，且构建时无法被 CSS Modules 正确作用域隔离 - 好处是：VS Code 中输入
user-card可触发类名补全，新人不会手误写成userCard__title - 特别注意：页面组件如
HomePage.vue不得作为 Block，它只是路由入口；真正 Block 是其内部的home-banner、home-product-list等子组件
Element 名禁用动词，Modifier 必须可枚举且无断点语义
Element 名只能是名词，修饰符名必须来自预定义白名单，否则 CI 构建阶段会被 postcss-bem-linter 拦截。
- 错误示例：
user-card__toggle（动词）、user-card--mobile（断点）、user-card--v2（不可枚举） - 正确写法：
user-card__avatar、user-card__contact-text、user-card--loading、user-card--compact - 所有 Modifier 必须在
src/styles/variables.scss中声明为 SCSS map：$user-card-modifiers: ('loading': true, 'compact': true);，供 lint 工具校验
JSX/模板中禁止字符串拼接类名，必须封装 BEM 工厂函数
在 UserCard.vue 的 setup() 中，不能出现 class="user-card__avatar user-card__avatar--large" 这种硬编码，也不能用三元表达式拼接。
- 推荐做法：用
computed封装工厂函数：const bem = (el, mod) => `user-card${el ? '__' + el : ''}${mod ? '--' + mod : ''}` - 调用方式：
:class="bem('avatar', isLarge ? 'large' : null)"，确保所有类名生成路径唯一、可追踪 - 避免陷阱：不要在
utils/common.js里写全局bem()函数——它无法感知当前组件 Block 名，容易导致button__icon错配到user-card上
第三方组件和 legacy 样式必须 wrapper 隔离，且 wrapper 类名也需 BEM 合规
Ant Design Vue 或 wd-icon 这类外部组件，不能直接加 user-card__icon 类——它们的 DOM 结构不受控，样式穿透风险高。
- 正确姿势：用 wrapper 元素包裹，并赋予合规 BEM 类：
<view class="user-card__icon-wrapper"><wd-icon name="user"></wd-icon></view> - 对应的 SCSS 必须独占文件
_user-card-icon-wrapper.scss，只写.user-card__icon-wrapper { & > * { ... } }，禁止出现.wd-icon字样 - legacy 工具类如
.hidden只允许出现在src/styles/utils.scss，且必须加命名空间：.u-hidden，防止污染业务 Block
BEM 在 Uni-app 里最易被忽略的点，是认为“写了双下划线就等于规范”。实际上，Block 文件是否独立、Modifier 是否被工具链强制枚举、JS 中类名是否由组件上下文生成——这三处任一失守，整个命名体系就会在跨端构建时开始漏风，尤其在小程序 styleIsolation: 'isolated' 下，错一个类名，样式就彻底消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
