element脱离block后样式失效，因bem中element类名（如card__title）不带基础样式，依赖父block（如.card）提供display、font-size等继承属性，脱离后后代选择器无法匹配。
Element脱离Block后为什么样式会断掉
因为BEM中card__title这类类名本身不带基础样式，它依赖card这个Block提供display、font-size、padding等继承链。一旦card__title被单独塞进modal或header里，浏览器找不到父级card，所有靠.card .card__title写的样式（哪怕没显式写，也可能是SCSS嵌套生成的）就完全失效。
常见现象包括：文字颜色回退到全局默认、行高塌陷、margin为0、图标错位——不是CSS没加载，是选择器根本没匹配上。
不要用后代选择器“抢救”脱离的Element
看到card__title样式丢了，有人会立刻补一条.modal .card__title { ... }。这违反BEM核心契约，而且埋坑：
- 这个规则只能救当前一处，换到
aside里又得再写一遍 - 后续
card__title加新样式时，必须同步改所有“抢救”规则，极易漏 - 浏览器渲染时要回溯父级，DOM层级深了性能明显下降
- 团队新人看到
.modal .card__title，根本分不清card__title到底属于哪个模块
Element必须依附Block使用的实操判断法
检查三个硬信号，任一成立就说明Element已被误用：
- HTML里出现孤立的
class="menu__item"，但父容器没有menu类 - 开发者工具中，该元素的
computed面板里font-size、color、margin全是浏览器默认值（非继承自父Block） - JS初始化报错
Cannot read property 'addEventListener' of null，根源是代码按document.querySelectorAll('.menu')找容器，再查.menu__item子节点，但DOM里没.menu
需要复用视觉结构时的正确路径
别复制card__title类名，先问语义：
- 如果同一段UI在多个上下文重复出现（比如表单输入框和搜索框都带图标），它本身就是独立功能单元 → 提取为新Block：
icon-input - 如果只是视觉微调（按钮加图标、标题加大号），用Modifier：
button--with-icon，并在其内部定义button--with-icon__icon - 如果必须跨Block共享状态标识（如卡片和弹窗都显示“在线”徽标），用BEM mix：
<div class="card status-badge status-badge--online"></div>，两个Block各自维护逻辑
真正难的不是写CSS，是每次往DOM里塞一个__element类名前，确认它头顶有没有对应的block——这个动作没法自动化，得人盯住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
