modifier互斥逻辑必须由js控制，因css层叠无法保证动态切换时类名的一致性；尺寸类需单选归一，状态类可多选共存，基础块类（如.btn）必须提供完整默认样式且始终存在。
Modifier互斥逻辑必须由JS控制，不能靠CSS层叠
BEM本身不限制Modifier叠加，但像 btn--small 和 btn--large 这类尺寸变体天然互斥——一个按钮不可能同时是 small 和 large。CSS 层叠顺序（谁在文件里写得靠后）无法保证行为一致，尤其在动态切换时容易残留旧类。真正可控的方式是在 JS 层做单选归一。
- 避免布尔对象平铺：
{ 'btn--small': isSmall, 'btn--large': isLarge }可能导致两者同时为true，生成btn--small btn--large - 改用三元链或查表映射：
const sizeMod = isLarge ? 'btn--large' : isSmall ? 'btn--small' : null - 状态类（如
btn--loading、btn--disabled）可与尺寸类共存，但必须和尺寸类分组处理，不混在同一对象里 - React 中建议封装为 hook：
useButtonClasses({ size: 'large', loading: true })，内部先归一 size，再合并状态
为什么不能依赖CSS规则覆盖顺序解决冲突
有人试图让 .btn--large 的 CSS 写在 .btn--small 后面，指望它“赢”。这在静态场景下可能凑效，但一旦 JS 动态增删类，就极易出问题：比如先加 btn--small，再加 btn--large，看起来 OK；但如果中间有异步延迟、React 批量更新或事件节流，就可能出现短暂的双类共存，触发意料外的样式叠加或过渡抖动。
- 浏览器 DevTools 里看到
btn--small被划掉，不代表 JS 逻辑里它已被移除——只是 CSS 规则被覆盖了 - transition 或 animation 在双类切换时可能残留中间态，比如
width从 small → large → small 来回跳 - 某些 UI 库（如 Ant Design）的组件内部也用 class 控制状态，若你在外层叠加同名 modifier，会和库自身逻辑打架
React/Vue 中推荐的类名合成模式
不要手拼字符串，也不要用 clsx 直接透传原始布尔值。要分层处理：尺寸/主题类走单选，状态类走多选，基础块类永远存在。
- 基础块类（如
btn）必须始终存在，否则修饰符失效——btn--large单独使用不会生效，它依赖.btn提供默认宽高 - 示例（React + clsx）：
clsx('btn', sizeMod, { 'btn--loading': isLoading, 'btn--disabled': isDisabled }) - Vue 模板中避免
:class="{ 'btn--small': isSmall, 'btn--large': isLarge }"，改用计算属性返回单一 size 类 - 如果 size 有默认值（如
'medium'），确保它对应一个实际存在的 modifier 类（btn--medium），而不是靠基础块兜底
容易被忽略的边界点：Modifier缺失时的基础样式是否完整
很多团队只写了 .btn--small 和 .btn--large，却忘了定义 .btn 的默认尺寸。结果当 sizeMod 为 null 时，按钮既没 btn--small 也没 btn--large，只剩裸 btn，而这个类可能只设了 padding 和 color，没设 width / height —— 导致布局塌陷。
- 检查所有 block 的基础类（如
.btn）是否包含完整的、可独立工作的默认样式 - Modifier 应只做“差异化覆盖”，比如
.btn--large只改height和font-size，不重复声明padding或border - 用 PostCSS 的
@apply或 CSS 变量提取公共样式，避免基础类空洞
