BEM复用需坚守block命名唯一性与工具链校验，element必须绑定具体block；复用样式逻辑而非类名，通过@mixin、自定义属性或独立block实现安全复用，禁用跨block类名共享。
BEM 本身不解决跨组件复用时的命名冲突，冲突只会在 block 名重复或 element 脱离上下文时发生；真正起效的是 block 命名唯一性 + 工具链强制校验，而不是“多写几个下划线”。
为什么 button__icon 在多个组件里复用会出问题
单独写 button__icon 看似通用，但 BEM 要求 element 必须绑定到具体 block。一旦两个组件都定义了 button__icon，它们就共享同一份样式逻辑——改一处，所有用这个类的地方全变。这不是复用，是隐式耦合。
- 错误场景：A 组件的
primary-button__icon和 B 组件的action-button__icon都想复用同一套 SVG 样式，结果硬塞进同一个button__icon类 - 后果：A 组件加了
vertical-align: middle，B 组件的图标立刻错位；DevTools 里找不到样式来源，因为 class 没带 block 上下文 - 正确思路：复用的是样式逻辑，不是类名。把共用样式抽成 SCSS
@mixin icon-reset或 CSS 自定义属性，类名仍保持primary-button__icon、action-button__icon各自独立
如何安全复用 element 结构而不破坏 BEM
当多个 block 确实需要相同 DOM 结构（比如都含一个带边框的卡片标题），不能靠“类名一致”来复用，而要让结构复用和命名隔离解耦：
- 用 SCSS
@extend或@include复用样式声明，不复用类名本身 - 允许跨 block 共享基础 utility 类，但必须明确限定作用域，例如
u-text-truncate（加u-前缀表明是工具类，且禁止带任何布局/尺寸语义） - 若必须复用完整结构，封装为独立 block，比如
text-heading，再被user-card__title或profile-section__title通过组合方式调用（ - 禁止在 SCSS 中用
.button__icon { @extend .icon-reset; }后，又在另一处写.card__icon { @extend .icon-reset; }—— 这会导致构建后两个类共享同一份 CSS 规则，失去 BEM 的隔离价值
stylelint-selector-bem-pattern 怎么拦住伪复用
工具链不识别“意图”，只认正则。它能卡住那些看起来像复用、实则破坏 BEM 结构的写法：
- 配置
{"styleType": "bem"}后，.button__icon会被报错，因为button不是合法 block 名（缺少项目/模块前缀）；必须写成checkout-button__icon或admin-button__icon -
.button__icon--large会被接受，但.button__icon_error（单下划线）直接报错 —— 因为--是 modifier 的语法锚点，漏掉就无法被 lint 工具、VS Code 插件、CSS 提取逻辑识别 - CI 中跑
npx stylelint "**/*.{css,scss}" --max-warnings 0才真正生效；否则 warning 只提示，不阻断提交 - 老代码可豁免：用
overrides配置只对src/components/**/*.{css,scss}生效，避免迁移成本卡住迭代
JS 动态拼接时怎么避免“复用假象”
手拼 className="button__icon" 看似省事，实则埋下跨组件污染隐患。一旦 A 组件传入 block="button"，B 组件也传入 block="button"，就退回泛化类名陷阱。
- 危险写法：
className={`${block}__icon ${isLarge ? `${block}__icon--large` : ''}`→ 如果block是字符串"button"，就产出全局污染类名 - 推荐方案：block 名必须来自常量或 props 约束，例如
const BLOCK = 'search-form';，再封装cn函数：cn('icon', isLarge ? 'large' : null) - 更稳妥：用
clsx+ 常量对象：clsx(styles['icon'], isLarge && styles['icon--large'])，确保所有类名都经由 CSS Modules 编译，天然隔离 - 关键点：所有动态生成的类名，最终必须能追溯到具体 block 文件（如
SearchForm.module.scss），而不是运行时拼出的字符串
最易被忽略的是：复用需求往往来自“视觉一致”，但 BEM 强制你回答“这个元素属于谁”。不问归属就复用类名，等于主动放弃隔离能力。工具链能拦住语法错误，拦不住设计误判。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
