element 不能脱离 block 使用，这是 bem 的结构性前提；否则样式、js 行为和可访问性均会出问题，且问题常延迟暴露。
Element 不能脱离 Block 使用——这不是建议，是 BEM 的结构性前提。一旦脱离，样式、JS 行为、可访问性都会出问题，且问题往往延迟暴露。
为什么脱离 Block 的 Element 会失效
Element 类名（如 card__title）本身不携带基础布局或语义约束，它依赖 Block（card）提供：
• display、padding、font-size 等继承链
• role 或 aria-* 属性的上下文（比如 card__header 可能隐含 role="heading"）
• JS 初始化逻辑（如 document.querySelectorAll('.card') 查找后，再遍历 .card__* 子节点）
常见错误现象：button__loader 被硬塞进 modal 容器，结果 loader 不居中、点击无响应、屏幕阅读器读不出状态——因为它的定位和交互逻辑全写在 .button 的 CSS 和 JS 里。
如何快速识别 Element 是否被误用
检查三个信号：
• HTML 中该类是否出现在非对应 Block 的 DOM 节点上（例如单独写 <div class="menu__item"></div>，但父级没有 menu）
• 浏览器开发者工具里，该元素的 computed styles 明显缺失关键值（如 margin 为 0、color 回退到全局默认）
• JS 控制台报错类似 Cannot read property 'addEventListener' of null，根源是初始化代码按 .menu .menu__item 查找，但实际 DOM 结构不满足
遇到“需要复用 Element”时的正确做法
不要复制粘贴类名，先判断语义：
• 如果结构+行为在多个上下文中重复出现（如 input__icon 出现在搜索框、表单、筛选面板），说明它本就是独立功能单元 → 提取为新 Block：icon-input
• 如果只是视觉微调（如按钮带图标、输入框带图标），用 Modifier：button--with-icon，再在其内部定义 button--with-icon__icon
• 如果必须跨 Block 共享某段 UI（如卡片和弹窗都需状态徽标），用 BEM mix：<div class="card status-badge status-badge--online"></div>，两个 Block 各自维护样式与逻辑
SCSS 中容易踩的坑：嵌套不等于合法
即使你用 SCSS 写了 .card { .card__title { ... } }，编译后仍是扁平类名 .card__title，这没问题；但若写成：
.card {<br> .title { ... } // 错！这是后代选择器，破坏 BEM 扁平性<br>}
就会导致：
• 样式依赖 DOM 深度，换一层 wrapper 就失效
•
.title 类名全局污染风险回归• 无法通过类名直接定位组件边界
真正难的不是写对类名，而是每次加一个 __ 时，都得问一句：这个东西离开父 Block 还算不算它自己？答案是否定的，就别让它单独出门。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
