is-hidden单独使用无效，因BEM中它仅为状态标记，无独立样式规则；必须与块或元素组合（如.product-card__image.is-hidden）才能匹配CSS选择器并生效。
不能直接混用，is-hidden 这类状态类必须和 BEM 元素名组合使用，单独加在 DOM 上不会生效。
为什么 is-hidden 单独写无效
BEM 不认为 is-hidden 是一个独立样式单元——它只是个“状态标记”，没有绑定到任何块或元素，CSS 规则就找不到作用目标。浏览器只认你写的完整选择器，比如 .product-card__image.is-hidden，而不是靠语义推断。
- 常见错误现象：
<div class="product-card__image is-hidden"> 加了但没隐藏，DevTools 里查不到对应样式匹配 <li>根本原因：CSS 文件里大概率没写 <code>.is-hidden { display: none; }，或者写了但权重太低被覆盖 - BEM 工程实践要求：状态类必须依附于具体块/元素，如
.product-card__image--hidden或.product-card__image.is-hidden（后者需确保全局定义且不被覆盖） -
product-card__image--hidden：BEM 标准修饰符，样式逻辑完全收口在模块内，推荐用于强耦合状态（比如“图片加载失败时隐藏”） -
product-card__image.is-hidden：依赖全局基础类，适合跨模块复用的状态（如统一的 JS 控制显隐），但要确保.is-hidden定义在所有模块样式之前，且不带特异性（例如不能写成.utility.is-hidden） - 性能提示：如果项目用 CSS-in-JS 或构建时提取局部作用域（如 css-loader 的
localIdentName），.is-hidden必须声明为:global(.is-hidden)，否则会被哈希化失效 - 检查是否真的执行了
el.classList.toggle('product-card__image--hidden', shouldHide)，而不是只改了 state - 确认没有误写成
el.classList.add('is-hidden')—— 缺少前缀会导致样式不匹配 - 避免在 React/Vue 中仅靠条件 class 字符串拼接，如
className={`product-card__image ${isHidden ? 'is-hidden' : ''}`}，这会丢失 BEM 语义，且无法被 PostCSS 插件校验 - 用 DevTools 的 Elements 面板实时观察 class 列表变化，比 console.log 更可靠
is-hidden 和 --hidden 修饰符怎么选
两者都能用，但语义和维护成本不同：
JS 切换时容易漏掉的关键点
即使类名写对了，DOM 也没更新，常见断点位置：
立即学习“前端免费学习笔记（深入）”；
BEM 状态类不是语法糖，是协作契约。写错一个连字符或漏一个前缀，就可能让整个模块的状态控制链断裂，而且这种问题往往在联调后期才暴露——因为单测很难覆盖 DOM class 的实际渲染结果。
