block必须按组件划分而非页面，合格block需有明确业务职责且能在三个以上场景复用，如user-card、search-form；页面级容器和纯结构名（header、section-2）不合格。
Block 必须按组件划分，不是页面。 页面级容器（如 homepage、user-list-page）不能当 Block，否则一复用就崩——它既不独立，也不可移植。
为什么页面名不能当 Block
页面是临时组合，不是功能单元。比如 user-list-page 里塞了 search-form、user-card、pagination，这三个才是真正的 Block；而 user-list-page 本身只是个壳，换个路由或嵌入弹窗就失效。
常见错误现象：user-list-page__search 看似合理，但一旦把 search-form 抽出来放到详情页顶部，样式就断了——因为它的类名和父页面强绑定，CSS 作用域漏了。
- Block 必须能脱离当前上下文单独存在、测试、交付
- 页面 HTML 结构（
div、main、section）不是 Block，它们只是载体 - 带位置/层级描述的名称（
left-sidebar、top-nav）违反语义独立原则，不可复用
哪些才算合格的 Block
合格 Block 的判断标准只有一条：它有没有明确业务职责、能不能在三个以上不同场景中被原样复用。
-
user-card：出现在列表页、弹窗、导出预览、分享卡片 —— ✅ -
search-form：用在首页、筛选面板、侧边栏 —— ✅ -
permission-tree：配置页、角色编辑弹窗、API 权限调试工具 —— ✅ -
header、container、section-2—— ❌（无业务语义，纯结构或视觉分组）
React/Vue 项目里怎么落地
在组件文件里显式声明 Block 名，而不是靠目录路径或文件名推断。
例如，在 UserCard.vue 中写：
const BLOCK = 'user-card' // 后续所有 class 都基于它生成： // user-card // user-card__avatar // user-card__name // user-card--editable
避免 JS 拼接类名：`${BLOCK}__${element}` 可以，但 block + '__' + element 容易漏空格或大小写；更推荐用常量对象或 CSS Modules 隔离。
关键点：每个 Block 对应一个真实组件文件，且该文件导出的样式类名必须全部以这个 Block 名开头，不混用、不跨块引用。
最容易被忽略的是“Block 边界模糊”——比如把整个表格当成 table-block，结果操作列里的按钮硬写成 table-block__action-btn。其实 action-button 本身就是一个 Block，应该复用，再通过 user-card__action 表达组合关系。边界划不清，BEM 就退化成带下划线的混乱命名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
