BEM修饰符是DOM与CSS间的契约，需JS真实更新class、CSS严格按约定书写、DevTools验证；状态混乱主因是JS未更新DOM或CSS选择器错误，而非BEM失效。
直接用 block__element--modifier 命名 + JS 显式控制 class 切换，是目前最可控的状态管理方式。BEM 本身不提供逻辑，它只提供可预测、可调试、可隔离的类名契约；所有“状态混乱”问题，90% 出在 JS 没真正更新 DOM 或 CSS 选择器没写对。
为什么 .button--disabled 有时点了没反应
根本不是 BEM 失效，而是 class 没真实出现在元素上。浏览器只认 DOM 中存在的类名，不认 JS 变量里存的字符串。
- 检查 DevTools Elements 面板，确认
button元素的class属性是否真的包含button--disabled（不是button-disabled或button_disabled） - 确认 JS 调用了
element.classList.add('button--disabled')，而不是拼字符串后赋值给className（容易漏空格或覆盖其他类） - React/Vue 等框架中，确保 state 更新后确实触发了
className重渲染，不是只改了isDisabled却忘了映射到 class 列表 - 禁用 PurgeCSS 或类似工具的误删：若
button--disabled只在 JS 中动态添加，构建时可能被判定为“未使用”，需在safelist中显式保留/button--(disabled|loading|error)/
多个状态共存时，.button--primary.button--loading 怎么写才不冲突
BEM 不禁止多个修饰符共存，但必须保证它们语义正交、CSS 规则互不覆盖。
- 顺序无关渲染结果，但建议按「基础类型 → 运行状态 → 尺寸变体」排列：
button--primary button--loading button--large比button--loading button--large button--primary更易读 - CSS 中避免写
.button--primary.button--loading { ... }这种组合选择器——它权重高、难维护、且一旦漏一个类就失效；应分别定义：.button--primary控制颜色，.button--loading控制cursor: wait和图标旋转 - 禁用嵌套修饰符写法：
button--primary-loading是非法的，它不再是修饰符，而是一个新块名，破坏了 BEM 的可预测性 - 如果 loading 和 disabled 同时出现（比如接口超时后禁用按钮），允许共存，但需在 CSS 中明确处理叠加效果，例如：
.button--disabled.button--loading { opacity: 0.6; }
怎么让 .form-field--invalid 的样式不污染其他字段
关键在作用域起点：修饰符必须挂载在容器块上，而不是 input 本身。
立即学习“前端免费学习笔记（深入）”；
- 结构必须是：
<div class="form-field form-field--invalid"> <input class="form-field__input"><span class="form-field__message">邮箱格式不对</span> </div>—— 状态由容器承载，样式通过后代选择器下发 - 不要把修饰符加在
input上：form-field__input--invalid违反 BEM 原则，也导致无法统一控制错误提示文案和边框样式 - CSS 规则应写成：
.form-field--invalid .form-field__input { border-color: #d32f2f; }和.form-field--invalid .form-field__message { display: block; }，确保样式只在该容器内生效 - 避免跨块干扰：如果页面有多个表单，每个都用独立块名（如
login-form__field、signup-form__field），修饰符自然隔离，无需靠父级 class 或 JS 绑定作用域
什么时候该放弃 --modifier，改用 CSS 自定义属性
当变化的是纯视觉变量（颜色、间距、圆角），且这些值在多个块间高频复用时，--color-primary 比 button--primary 更灵活。
- 适用场景：主题切换（深色/浅色）、设计系统中的 spacing scale（
--spacing-md）、typography tokens（--font-size-lg） - 不适用场景：业务状态（
--error、--success）、交互反馈（--hover、--focus）、布局变体（--mobile）—— 这些仍需修饰符，因为它们代表结构含义，不能仅靠颜色值表达 - 混合使用更常见：按钮组件可以同时用
button--primary（语义）和var(--color-primary)（实现），既保语义又留扩展空间 - 注意兼容性：CSS 自定义属性在 IE 完全不支持，若需兼容，修饰符仍是唯一可靠手段
最容易被忽略的一点：BEM 修饰符不是“加个类就完事”，它是一份 DOM 与 CSS 之间的契约——JS 必须真实更新 class，CSS 必须严格按约定书写，DevTools 必须成为日常验证工具。任何一环脱节，状态就会断连，而这种断连往往静默发生，直到用户点击后界面毫无响应。
