BEM类名一改就炸的根本原因是传统选择器依赖DOM层级而非类名本身，导致结构变动时样式静默失效或意外污染；BEM通过user-card__title显式声明作用域，消除隐式依赖。
为什么BEM类名一改就炸——传统选择器的隐式依赖问题
根本原因在于：传统写法如 .user-card .title 把样式生效逻辑藏在 DOM 层级里，而不是类名本身。一旦父容器改成 .profile-card 或结构从 div > h3 变成 article > header > h3，样式就静默失效；更糟的是，它可能意外匹配到另一个模块的 .title，导致“改A却崩B”。BEM 把这个依赖显式搬到名字里：user-card__title —— 它不关心你在哪、嵌多深，只认这个字符串。
Modifier命名不当怎么引发回归Bug
常见错误是把数据状态当视觉修饰符用，比如写 button--is-loading 或 card--has-data。这类名字本身不描述外观，CSS 里得靠人猜“那它该变灰？还是加 spinner？”，后续有人加 transition: opacity .3s，所有带 --is-loading 的组件就一起淡入——哪怕其中几个根本不该动。正确做法是只用视觉/交互导向的修饰符：button--loading（已知要显示加载态）、card--empty（已知内容区为空白占位）。
-
button--loading→ 对应明确样式：禁用 + spinner + 灰色背景 -
button--disabled→ 对应明确样式：不可点击 + 透明度 0.5 - 禁止出现
button--is-disabled或button--should-hide这类模糊表达
stylelint 没配对 BEM 就等于没用
默认的 stylelint 完全不管 BEM 合规性。.btn-primary、.modal-close-btn 全部畅通无阻。必须手动启用 stylelint-selector-bem-pattern 插件，并严格配置规则：
- 设置
componentName正则为"[a-z][a-zA-Z0-9]+"，拒绝大驼峰和下划线开头 - 在
ignoreSelectors加上["/^\..+:(hover|focus|active)/"]，避免误报伪类 - 禁用自动修复（
fix: false），因为语义纠错没法靠机器做 - CI 流程里必须跑
stylelint --config .stylelintrc.js src/**/*.css，不通过就阻断合并
JS里拼接类名时最容易漏掉的三个点
React/Vue 中动态加修饰符最常出错，不是逻辑问题，而是拼写和结构断裂：
立即学习“前端免费学习笔记（深入）”；
- 漏写 Block 前缀：
className={isFeatured ? 'featured' : ''}→ 应为product-card--featured - 连字符写成下划线：
card__title--large（非法）→ 正确是card__title--large（注意双中划线只用于 modifier） - 大小写混用：
Card__header和card__header在 Linux 构建环境会视为不同类名，样式丢失且无报错
建议统一用 clsx 或封装 bem('card', { featured: isFeatured }) 工厂函数，把前缀和分隔符逻辑收口，避免散落在各处的手拼字符串。
