element抽离后样式易崩，因其显式或隐式依赖block的overflow、border-radius、font-size等布局约束，继承链断裂导致裁剪失效、间距异常、对齐失焦；js初始化按block范围查找子元素，脱离后直接被跳过，aria上下文亦随之断裂。
因为Element脱离原始Block后，会丢失语义上下文、样式继承链和JS初始化依赖，导致样式错乱、功能失效或可访问性断裂。
Element抽离后样式为什么容易崩？
很多Element的样式显式或隐式依赖Block的布局约束。比如card__content通常依赖.card的overflow: hidden和border-radius；一旦单独使用.card__content，圆角裁剪就没了，内容可能溢出。
-
card__title的margin-top常基于.card的font-size计算，抽离后继承链断裂，间距异常 - 某些
__icon类名依赖menu__item的display: flex做对齐，单独用就失焦 - BEM文件加载顺序靠后时，
header__title可能意外套用card__title的样式（因类名无容器约束）
JS初始化逻辑为什么会漏掉？
组件初始化代码往往按Block范围批量查找子元素，例如document.querySelector('.form').querySelectorAll('.form__*')。如果把form__submit硬塞进.modal里，它就不在.form下，直接被跳过。
- 表单验证逻辑查不到这个按钮，提交事件监听器没挂上
- React/Vue中若用
ref绑定到form__submit，但DOM结构不满足.form包裹前提，ref为空 - ARIA属性如
aria-labelledby依赖Block提供上下文，抽离后屏幕阅读器无法识别归属关系
什么时候该新建Block而不是提升Element？
当视觉结构相似但语义或行为不同时，必须新建Block。比如search-input__icon和filter-input__icon看似一样，但前者触发搜索，后者过滤列表——它们不是“同一个元素”，而是“同一类功能单元”。
- 判断标准：这个元素抽出来单独用，是否仍能表达完整意图？
button__loader可以，menu__item-icon不行 - 复用应通过Modifier（如
icon--search、icon--filter）或CSS自定义属性控制，而非共享__icon类名 - 真正独立的功能单元（如状态指示器、加载骨架）才配叫Block，命名必须小写短横线分隔，不带位置或状态词
最隐蔽的问题是：样式崩了还能肉眼发现，而JS逻辑漏初始化或ARIA语义断裂，往往上线后才被用户或自动化测试捕获。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
