元素不得脱离块单独存在，必须与块类名共存于同一节点或其直系子节点；双下划线__表示强语义依附关系，脱离即丧失上下文、样式边界与可维护性。
不允许。元素脱离块单独存在，直接违反BEM核心规则。
元素必须和块同时出现在HTML中
BEM不是命名习惯，而是语义契约：每个 .block__element 类名都隐含一个硬性约束——它只能在 class 同时包含 block 的节点上使用。比如 .search-form__input 必须写在 <div class="search-form"><input class="search-form__input"></div> 这种结构里，不能只写 class="search-form__input"。
常见翻车点：
- 用 JS 动态插入元素时漏加 block 类，导致样式丢失
- 组件库文档示例只给 element 类，开发者照抄后发现没效果
- 抽离公共样式时把
.button__loader单独拎出来复用，但没同步带上.button
为什么不能脱离？不是“写法限制”，而是语义锁死
双下划线 __ 不是 DOM 层级标记，而是声明“这个元素的样式逻辑完全依附于所属块”。一旦脱离，就失去上下文锚点：
立即学习“前端免费学习笔记（深入）”；
-
.card__title离开.card，既没语义（标题属于谁？），也没样式边界（字号、行高、margin 从哪继承？） -
.nav-menu__item单独用，无法确定 hover 色值该沿用导航主题，还是被全局a:hover覆盖 - 工具链（如 PostCSS BEM 插件、VS Code BEM 插件）会默认校验这种耦合，报错
Element ".card__footer" used without parent block ".card"
什么情况下看起来“像脱离”，其实是误判？
有些类名看似是 element，实则是独立 block，这是初学者最常混淆的点：
-
.header__logo→ 错误。如果.logo在页脚、弹窗、邮件模板里都复用同一套尺寸/颜色/点击行为，它就是.logo块，不该塞进header命名空间 -
.product-card__badge→ 高风险。若 badge 在商品列表、用户资料、通知栏高频复用，应升为.badge块，再通过.badge--in-product-card修饰 -
.form__field→ 反模式。它本身已承担布局+状态+交互职责，该拆成独立.form-field块，而不是当.form的 element
真正难处理的，从来不是“能不能写”，而是“该不该存在”——BEM 的类名不是写出来的，是推导出来的：删掉块，这个类还能不能活？不能，就老老实实跟紧它；能，那它早该是块了。
