判断一个class该是Block还是Element，关键看其能否脱离当前上下文独立存在、是否具备复用价值：能跨页面复用、有独立样式/行为/语义的为Block（如search-form），否则必须依附Block的为Element（如search-form__input），且Element不可嵌套、不得跨Block复用。
怎么判断一个 class 该是 Block 还是 Element
关键看它能不能脱离当前上下文独立存在、有没有复用价值。比如 search-form 是 Block，因为它能出现在首页、弹窗、侧边栏；而 search-form__input 就不能单独用——抽出来就没了语义和样式基础。
常见误判点：
- 把视觉容器当 Block：
section-2、wrapper、container都不合格，它们没功能含义，只是临时占位 - 把可复用节点硬写成 Element：
header__logo看似合理，但如果 logo 同时出现在 footer，它就该是独立的logoBlock - Element 嵌套 Element：
card__content__title违反 BEM 规则，要么拆成card__title，要么让content升级为 Block
Block 名必须原子化且语义中性
Block 名不是描述“在哪”或“长啥样”，而是回答“What is it?”。比如模态框叫 dialog，不叫 modal 或 popup-dialog——前者避开 Ant Design、Element Plus 的命名冲突，后者违反“原子化”原则。
搜索框组件也一样：search-form ✅，search-box ❌（box 是视觉描述），header-search ❌（含位置词，破坏复用）。
立即学习“前端免费学习笔记（深入）”；
其他合格示例：user-card、notification-banner、pagination-controls。它们都是名词 + 角色/功能的组合，不绑定具体业务或布局位置。
Modifier 为什么不能挂错地方
修饰符只表达 Block 或其直属 Element 的状态变体，不能跨层、不能描述样式值。比如按钮聚焦态要写 search-form__input--focused，而不是 search-form__input-focused（缺双短横，被解析为 element）。
容易踩的坑：
- 用视觉值命名：
btn--red❌ → 改成btn--primary✅，换主题时只需改变量，不用全局搜替换 - Modifier 挂在非直属节点上：
dialog__overlay--center❌ → 位置是整个 dialog 的状态，应写dialog--center✅ - 三层结构：
search-form__button--clear--hidden❌ → 清空按钮的状态应由自身控制，写search-form__button--clear+search-form__button--hidden，或直接拆出clear-buttonBlock
SCSS 里怎么写才不破坏 BEM 封装性
只允许单层嵌套：&__element 和 &--modifier 安全；一旦出现 &__item &__icon（中间有空格），编译结果就是后代选择器 .block__item .block__icon，样式会意外泄漏。
真实项目中 CSS 输出必须是扁平类名。哪怕 DOM 结构很深，BEM 要求的也是逻辑归属，不是 DOM 层级映射。
遇到“子元素里的子元素”，优先拆新 Block：table-cell__badge ❌ → 改成 badge + badge--in-table ✅。这比强行拉长命名更可控，也更利于复用。
