BEM中Modifier不能直接作用于Element，必须归属Block层：card__title--highlight错误因状态语义断裂，正确做法是用card--highlighted统一控制样式与状态，确保边界清晰、优先级可控、测试可维护。

Modifier 不能直接作用于 Element 来表达状态，必须通过 Block 级 class 控制 Element 的表现。 这不是限制，而是 BEM 的契约核心：状态归属要清晰，样式链要可预测。

为什么 card__title--highlight 是错的

这个类名看似合法（语法上符合 block__element--modifier），但语义断裂：card__title 是结构角色，不承载“是否高亮”这种业务状态。一旦在 JS 里直接加它，就等于把状态逻辑下放到了子节点，导致：

• 其他 card__title 元素可能被意外影响（比如同页多个卡片）
• CSS 中 .card--collapsed .card__title 规则无法覆盖 .card__title--highlight 的 specificity，样式优先级失控
• 测试困难——你得 mock 每个 card__title 的 class 列表，而不是只断言 card 的状态

正确做法：用 card--highlighted 驱动 card__title

把状态提升到 Block 层，让 CSS 自动向下传导。所有视觉变化都由 Block Modifier 触发，Element 只负责结构标识：

.card {
  /* 基础样式 */
}
.card--highlighted .card__title {
  color: #007bff;
  font-weight: 600;
}
.card--highlighted .card__image {
  opacity: 0.9;
}

JS 中只需操作一次 class：

• ✅ 正确：cardEl.classList.toggle('card--highlighted')
• ❌ 错误：titleEl.classList.toggle('card__title--highlight')

React/Vue 中怎么映射 Block 状态

组件内部应把 props 映射为 Block 级 class，而不是分散到各个 Element 上：

• Vue 示例：<Card :class="{ 'card--highlighted': highlighted, 'card--featured': featured }" />
• React 示例：<Card highlighted={true} featured={false} />，组件内用 classnames('card', { 'card--highlighted': highlighted })
• 关键点：Block 名（card）必须全局一致；Element 和 Modifier 都是它的派生，不能在子组件里擅自重命名

哪些情况看起来像要改 Element，其实该拆新 Block

当某个 “Element” 在多个上下文中复用、且行为/样式差异大时，它大概率不是 Element，而是独立 Block：

• 比如表格里的 user-list-table__cell--status → 实际应提取为 status-badge Block，再用 status-badge--active 控制自身状态
• 再如弹窗中的 modal__header__close-button → 违反 BEM 单层嵌套，且 close-button 是通用控件，应独立为 close-button Block
• 判断依据：它能否脱离当前 Block 单独存在？能否被其他页面复用？能 → 就是 Block

真正难的不是写对 class 名，而是每次加 Modifier 前，先问一句：这个状态属于谁？如果答案不是 Block，就得重新划边界。