login-dialog 和 register-dialog 不能共用，必须拆分为两个独立的 Block。因为它们在语义表达、状态逻辑和数据结构上都存在明显差异，强行复用会引发 JS 初始化混乱、表单校验耦合，以及 A11y 属性冲突等问题。
登录弹窗和注册弹窗该共用一个 Block 吗？
不建议共用，应该拆分成两个独立的 BEM 块，例如 login-dialog 和 register-dialog。原因很明确：它们的业务语义不同、状态处理方式不同、表单数据结构也不同。如果强行复用同一个 dialog Block，往往会带来一系列问题，比如 JS 初始化逻辑错乱、表单验证规则相互耦合，以及无障碍 A11y 属性冲突。
为什么不能只用 dialog 加修饰符区分？
很多人在写 CSS BEM 规范时，会选择使用 dialog--login 和 dialog--register 这种方式区分登录弹窗和注册弹窗，但这种写法很快就会暴露出问题：
dialog--login会影响全局.dialog的样式作用域。例如.dialog__form在登录场景中通常只需要处理邮箱和密码提交，而在注册场景中则往往包含用户名、两次密码、验证码等字段，字段数量、校验规则和提交逻辑都完全不同- JS 初始化通常会按照 Block 名统一查找，例如：
document.querySelectorAll('.dialog')会同时选中两个弹窗一起初始化。但实际上，login-dialog可能需要预填邮箱，register-dialog则更适合在打开时清空全部字段，这两套逻辑很难统一处理 - A11y 属性如
aria-labelledby所指向的 ID 必须保持唯一且语义准确；如果共用.dialog，就很容易出现标题 ID 重复的问题，或者不得不使用动态 ID，反而进一步增加实现复杂度
login-dialog 和 register-dialog 怎么复用样式？
视觉风格相似，并不代表语义层面也应该共用一个 Block。在 BEM 命名规范中，样式复用应通过 CSS 抽取来完成，而不是直接共享类名：
- 可以通过
@apply或@mixin提取公共的尺寸、动画和遮罩层规则，例如@apply dialog-base-styles;，这样既能实现样式复用，又不会破坏 Block 的独立性 - 遮罩层仍然应该作为各自的 Element 存在，也就是分别使用
login-dialog__overlay和register-dialog__overlay。它们可以共享同样的 opacity 和 z-index 规则，但不应该直接共享同一个类名 - 如果提交按钮样式一致，可以单独抽离为独立 Block，例如
submit-button，然后在两个弹窗中作为子组件复用，而不是分别写成login-dialog__submit和register-dialog__submit去硬性绑定业务语义
什么时候才算“真正可复用”的 Block？
判断一个 Block 是否适合复用，关键并不在于它“长得像不像”，而在于它能否脱离当前上下文后依然独立存在，并保持完整且明确的语义：
icon就是典型的可复用 Block：即使单独使用，它依然能够清晰表达“搜索图标”的语义login-dialog并不适合直接复用于注册流程：如果把登录弹窗直接放进注册页面，用户看到的依然会是“登录”标题、“忘记密码”链接以及邮箱密码字段，这会导致语义不一致，交互体验也会失效- 如果两个弹窗有 90% 的结构都相同，那通常说明中间抽象层遗漏了。更合理的做法是提取一个
auth-dialog作为认证类通用容器父 Block，再让login-dialog和register-dialog基于它继承布局能力，同时各自保留独立的状态管理和字段逻辑
还有一个在前端开发和 BEM 规范实践中最容易被忽视的重点：Block 命名的目的，从来不是为了“少写几个类名”，而是为了给 JS、CSS 和 A11y 提供清晰、稳定的作用域边界。一旦这个边界变得模糊，后续无论是加埋点、调整动效，还是做自动化测试与维护扩展，都会更容易踩坑。
