块是能脱离上下文独立复用的组件，判断标准包括：有独立CSS/JS、可单独测试、跨上下文复用；元素必须为块的直接子节点，命名禁双下划线，修饰符须与基础类共存。
能脱离上下文独立复用的，就是块；否则就是元素。 这不是看嵌套深浅或视觉大小，而是工程上能不能“自己活”。
怎么判断一个类该是 block 还是 element
最硬的标准：删掉父级后，它还能不能跑起来。
- 有自己独立的 CSS 文件（比如
avatar.css），不依赖user-card.css就能渲染 - 配套 JS 行为不耦合父组件生命周期（例如点击放大头像，逻辑在
avatar.js里） - 能在 Storybook 或测试中单独 mount 和断言（
render(avatar)） - 出现在至少两个无关上下文中（如用户卡片、评论区、个人设置页）
满足任意一条，就该是 avatar 块；全都不满足，才考虑写成 user-card__avatar。
DOM 结构验证：element 必须是 block 的直接子节点
BEM 对 HTML 层级有硬约束：元素类名对应的标签，必须紧贴块标签下一级。
- ✅ 正确：
- ❌ 错误：
card__title实际嵌套在card__inner下，违反规则 - 若真需要中间容器，应把
card__inner升级为新 block（如card-body），再让card-body__title归属它
常见命名翻车点
很多误判来自直觉误导，而不是规范本身。
-
container、wrapper不是块——它们只是布局占位，没功能语义 -
card-header不是块——它是card__header元素，因为 “header” 不具备跨组件复用能力 -
card__body__title是非法的——BEM 禁止双下划线嵌套；应改为card__title或新增card-body块 -
button__icon很可能不该存在——如果图标只是按钮里固定尺寸的 SVG，没变体、没复用场景，它甚至不该有类名，用button svg或继承更轻量
修饰符必须和基础类共存
修饰符不是替代，是增强。单独用 card__title--large 会断裂语义。
- ✅ 正确写法：
标题
- ❌ 错误写法：
标题
.card__title--large可能被误用于其他地方 - SCSS 中写
&__content { &__title {} }会生成card__content__title—— 语法合法，语义非法
真正容易被忽略的是：BEM 的约束不在 CSS 选择器层级，而在 HTML 结构与工程职责的对齐。一旦 DOM 层级和类名不一致，后续所有样式、JS、测试都会开始漂移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
