card__header__title非法，因BEM要求Element必须直属于Block，而card__header只是Element非Block，导致语义断裂、样式失效、JS定位错位及维护成本激增。
为什么 block__el1__el2 是非法命名，不是手误而是语义崩坏
BEM 明确禁止 card__header__title 这类写法，因为它直接违反“Element 必须直属于 Block”的契约。浏览器不会报错，但语义归属已断裂：card__header__title 暗示 DOM 中存在 card__header 作为父级 Block，可实际上 card__header 只是 card 的一个 Element，没有独立复用能力。
常见错误现象包括：
- SCSS 中用
&__header { &__title { } }编译出非法类名，还容易误给card__header加 padding，破坏 Element 纯展示语义 - DOM 调整（比如把
card__header改成card__section）后，所有card__header__title样式静默失效 - JS 定位失焦：
querySelector('.card__header__title')想找“属于 card 的标题”，但实际匹配的是挂载在card__header下的子节点，语义与实现错位
多层嵌套如何让维护成本指数上升
深层 BEM 类名看似结构清晰，实则把样式和 DOM 路径强绑定，等于主动放弃可维护性。判断标准很实在：删掉外层 Block，这个 UI 片段还有意义吗？没意义 → 是 Element；有意义 → 它自己就是 Block。
card__header__title 离开 card 就无法单独复用，说明它不该是子元素的子元素，而应归入 card__title 或提升为独立 heading 块。
真正难的不是写对 __ 和 --，而是每次加一层 DOM 时，停下来问一句：这个节点是不是一个能独立存在、有明确功能边界的 UI 单元？如果不是，它就不该有自己的 BEM 类名——更不该靠多一个 __ 来“假装”合理。
遇到视觉嵌套该怎么拆，而不是套娃
面对“标题里的图标”“按钮里的加载指示器”这类场景，BEM 不允许妥协命名，而是要求重构职责：
- 图标作为标题的视觉变体 → 用修饰符：
card__title card__title--with-icon - 图标具备独立语义（如状态徽标、操作入口）→ 升格为新 Block：
badge或icon-button，再组合使用： - 真需微调子元素样式（比如 icon 在 title 内部的对齐）→ 用属性选择器：
[data-icon-position="left"]，而非靠类名层级绑定
SCSS 嵌套语法天然容易产出违规选择器
SCSS 的 & 是父选择器完整副本，不是作用域保护。一不留神就会生成非法结构：
-
.card { .header { .title { &.active { } } } }→ 编译出.card .header .title.active，4 层+状态类，权重拉满 -
.btn { .icon { &--small { } } }→ 实际生成.icon--small，语义断裂，跟.btn完全脱钩 -
@at-root不是用来“救”深层嵌套的，它只适合切断本不该继承的前缀（比如媒体查询内提级），不是给 4 层缩进打补丁
最易被忽略的一点：HTML 中每个 Element 必须显式带 Block 类，class="user-card__avatar" 会断开语义链，导致样式不可预测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
