列表页不能只用一个list block，因bem禁止element嵌套element、权限与样式耦合、批量浮层被截断；须拆为table-list、list-action-bar、list-item-actions等独立block。
因为不引入 BEM，后台管理系统里的样式冲突、权限态错乱、批量浮层被截断这三件事不是“偶尔发生”，而是“每改一次就炸一次”。
为什么列表页不能只用一个 list Block
常见错误是定义 .list__item，再往里套 .list__item__action —— 这直接违反 BEM 规则，也掩盖了真实职责边界：
-
.list__item__action是非法命名：BEM 禁止 Element 嵌套 Element，__action必须属于某个独立 Block，而它实际是可复用的操作按钮组 - 权限控制常作用于整行（如“删除”按钮是否渲染），但
.list__item自身不持有权限逻辑，硬塞进去会让 JS 状态和 CSS 类名耦合 - 批量操作浮层（如“已选 3 项”提示条）需要脱离列表容器定位，若强行挂
.list__bulk-bar，z-index 和 position 会被父级.list的overflow或transform截断
哪些部分必须拆成独立 Block
后台列表页中真正该作为顶层 Block 存在的，是具备明确数据源、独立交互逻辑、可跨页面复用的单元：
-
table-list：负责表格骨架、分页器、顶部工具栏（含搜索、刷新、新建），但不含具体列渲染逻辑；列配置由 JS 控制，CSS 只管table-list__thead、table-list__pagination -
list-action-bar：批量操作浮层，固定在视口底部或右下角，用list-action-bar__counter、list-action-bar__btn，与table-list无样式依赖 -
list-item-actions：每行右侧操作列，含“编辑”“删除”“复制”等按钮，支持list-item-actions--readonly修饰符，内部按钮复用btnBlock -
list-filter-panel：高级筛选抽屉，独立控制展开/收起动画、表单校验、重置逻辑，不和table-list共享类名前缀
list-item-actions 为什么不能写成 table-list__actions
这不是“命名长度问题”，而是“所有权归属问题”：
-
table-list__actions暗示它属于表格，但同一套操作按钮可能出现在弹窗、卡片、详情页里——一旦复用，就得复制样式或加 hack 选择器 - 权限判断逻辑（如
canDelete）通常在 JS 层统一处理，list-item-actionsBlock 内部只需响应布尔 props，不用知道当前在哪张表里 - DOM 结构微调（比如给
table-list加个 wrapper 容器）不会让list-item-actions样式失效，因为它不依赖任何父级选择器 - 审查元素时搜
list-item-actions就能定位到唯一文件，而不是在十几个_list.scss里 grep
真正容易被忽略的是 Block 边界感：它不是按 DOM 深度切，而是按“谁负责这个行为、谁决定它显隐、谁管理它的状态”来划——划错一块，后面所有复用和权限控制都会开始漂移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
