必须删除三段式类名，因其破坏BEM语义链：card__header__title错误将header视为Block，实则仅为card的Element，导致DOM变动时样式静默失效、复用困难、DevTools难调试、迁移错位等问题。
card__header__title 这类三段式类名为什么必须删
它不是浏览器报错的问题，而是语义链断裂的起点——card__header__title 暗示 header 是一个 Block，但实际它只是 card 的一个 Element，不能承载子 Element。这种写法会让团队不敢动 DOM 结构：改个 card__header 的包裹层，card__header__title 就静默失效；抽离复用时发现它根本离不开当前 HTML 路径。
常见错误现象：
- SCSS 中写
&__header { &__title { ... } }，编译出非法类名，还容易误给card__header加 padding，破坏 Element 纯展示职责 - DevTools 里搜
title找不到对应样式，因为类名是拼出来的，不是语义化的 - 组件迁移时，
card__header__title在新页面里渲染错位，没人敢删也不敢修
DOM 嵌套深，HTML 怎么写才不破 BEM
HTML 可以保持三层甚至四层嵌套，关键不在结构深度，而在类名归属是否清晰。BEM 不要求 DOM 扁平化，只要求类名不随 DOM 层级“滑动”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把视觉上“孙子级”的节点提为独立 Block：
heading、section-title、status-badge，各自带自己的__和-- - 若该元素强依赖容器且几乎不复用，改用 Modifier：
heading--in-card-header，而不是card__header__title - 微调布局（如上下间距、颜色）靠父级类名控制：
.card__header .heading { margin-bottom: 8px; }，这种 CSS 嵌套仅限一层，且只用于布局微调，不定义核心样式 - 避免
card__body__button-group这种命名——它既搜不到，也切不出，还让button-group失去语义独立性
如何用 Modifier 和 State 类替代深层 Element
Modifier 不是用来补层级缺口的，而是表达有限、可枚举的状态变体；真正需要“上下文感知”的场景，State 类或 data- 属性比硬编码类名更可控。
使用场景与参数差异：
-
heading--in-card-header适合样式有明确变体（字体小 10%、行高压缩），且该变体在多个容器中复用 -
is-subheading适合一次性、弱复用场景（如折叠面板里的二级标题），CSS 写.is-subheading { font-size: 0.9em; } -
data-context="modal"适合样式高度依赖容器但又不想污染 Block 命名，CSS 写[data-context="modal"] .button { padding: 4px 12px; } - 禁止用
card__header__title--small：这等于把两层语义塞进一个 Modifier，违反block--modifier单一职责原则
BEM 类名臃肿的真实根源在哪
真正导致 HTML 和 CSS 膨胀的，从来不是双下划线本身，而是 Block 边界模糊、状态逻辑错位、Modifier 堆叠失控。比如 user-card__avatar--size-lg--theme-dark--is-loading，问题不在长度，而在于把尺寸、主题、加载态全塞进一个 Element 的 class 列表里。
性能与维护影响：
- Modifier 超过 5 个（
--primary、--sm、--disabled、--outline、--loading）后，HTML 字符串体积增长非线性，未 gzip 下单次渲染多出 1KB+ - 布尔型状态（如
--is-loading）必须和 Block 类名共存：user-card__avatar user-card__avatar--is-loading，不能单独出现，否则 JS 操作时易漏判 - 颜色、尺寸等可变量应交给 CSS 自定义属性：
--avatar-size: 48px，而非硬编码--size-lg - 多元素共用同一状态（如“加载中”），应提升到父级：
dashboard--is-loading，再用选择器批量控制：.dashboard--is-loading .dashboard__header
最容易被忽略的是：BEM 的 Block 必须能独立存在。一旦你写出 profile-page__user-card__avatar，就说明页面容器和功能组件的职责已经混淆——这不是命名技巧问题，是组件设计的起点错了。
