CSS BEM中的Block应该按组件还是按页面划分

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 作用域漏了。

1. Block 必须能脱离当前上下文单独存在、测试、交付
2. 页面 HTML 结构（div、main、section）不是 Block，它们只是载体
3. 带位置/层级描述的名称（left-sidebar、top-nav）违反语义独立原则，不可复用

哪些才算合格的 Block

合格 Block 的判断标准只有一条：它有没有明确业务职责、能不能在三个以上不同场景中被原样复用。

1. user-card：出现在列表页、弹窗、导出预览、分享卡片 —— ✅
2. search-form：用在首页、筛选面板、侧边栏 —— ✅
3. permission-tree：配置页、角色编辑弹窗、API 权限调试工具 —— ✅
4. 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 就退化成带下划线的混乱命名。