element类名不能直接增删，因card__title等element仅表结构，不承载状态；状态须由block或modifier控制，否则破坏bem契约、引发样式冲突与维护难题。
Element类名为什么不能在JS里直接增删
因为 card__title 这类类名本身不携带状态语义，它只表达“这是卡片里的标题”，而状态（如是否折叠、是否高亮）必须由 Block 或 Modifier 承载。JS 直接操作 card__title--highlight 会破坏 BEM 的层级契约：Element 不该有自己的状态变体。
- 常见错误现象：点击按钮后执行
el.classList.add('card__title--highlight')，结果样式生效但逻辑失控——其他地方的card__title也被意外影响，或后续card--collapsed的样式规则无法覆盖它 - 真实使用场景：折叠面板中标题需要响应展开/收起，但标题本身不是状态主体，整个
panel才是 - Modifier 必须作用于 Block 才能触发整套状态样式链，比如
panel--expanded应该控制panel__header、panel__content甚至panel__footer的显隐与过渡 - 性能影响：频繁切换 Element 级类名会导致更多重排重绘，而 Block 级状态切换通常只需一次 class 更新，CSS 层可批量响应
应该用什么代替 card__title--highlight 这种写法
把状态提升到 Block 层，用 Modifier 控制所有相关 Element 的表现。这不是“多写几个字”，而是让状态归属清晰、可预测、可测试。
- 正确方式：
panel--expanded+panel__title，然后在 CSS 中写.panel--expanded .panel__title { font-weight: bold; } - 如果需要独立控制某个 Element 的视觉反馈（比如仅标题变色），仍应通过 Block 状态派生，而不是给 Element 加 Modifier：
.panel--highlighted .panel__title { color: #007bff; } - 避免在 JS 中拼接类名：
el.className = `panel__title ${isHighlighted ? 'panel__title--highlight' : ''}`→ 改为统一操作panel元素的classList，让 CSS 自动向下传导 - React/Vue 中更推荐用状态驱动 Block 类名，例如：
<panel expanded="{true}" highlighted="{true}"></panel>，组件内部决定如何映射到panel--expanded panel--highlighted
为什么 card__title--highlight 是非法命名
card__title--highlight 违反了 BEM 三段式结构的基本约束：Modifier 只能修饰 Block 或 Element，但不能“修饰 Modifier”，更不能让 Element 承载独立状态。它看起来像语法合法，实则语义断裂。
- 从 OOP 类比看：
card__title是Card类的一个属性（property），你不会给一个属性单独定义子类；状态属于实例（即Card实例），不是属性实例 - CSS 实现上，这种写法迫使你写重复规则：
.card__title--highlight { … }和.card--highlighted .card__title { … }两套逻辑并存，后期难以收敛 - 可访问性风险：屏幕阅读器依赖 DOM 结构和语义类名推断上下文，
card__title--highlight无法传达“当前卡片处于高亮态”，而card--highlighted可配合aria-live或role="status"统一管理 - 自动化测试定位失效：Cypress 查找
cy.get('.card__title--highlight')会漏掉那些靠父级 Modifier 触发样式的标题，造成 flaky test
哪些情况看似必须操作 Element 类名，其实有更稳方案
真正棘手的往往不是“能不能”，而是“要不要”。多数所谓“必须操作 Element”的需求，本质是 Block 边界没划清，或状态抽象不到位。
- 表单内某输入框实时校验失败，想单独标红
form__input→ 改用form--validating或form--invalid，再由 CSS 控制.form--invalid .form__input.error - 表格某单元格内容超长需 tooltip，想加
table-cell__content--truncated→ 提取为独立 Block：truncate-text，或用属性选择器：[data-truncate] .table-cell__content - Modal 中关闭按钮需要不同尺寸，想写
modal__close-btn--small→ 关闭按钮本就不该是 modal 的 Element，它应是独立close-btnBlock，通过 context 类（如modal__footer .close-btn）微调布局 - 动态插入的 Element（如 JS 创建的
notification__icon）→ 确保插入时父容器已带对应 Block 类名，不要单独挂notification__icon到 body 下
classList.toggle 的目标锁定在 Block 上，很多“临时加个类”的冲动就自然消失了。
