pagination 是唯一合法的 Block 名，须严格遵循行业通用术语；内部语义单元如 pagination__item 和 pagination__link 职责分离；Modifier 必须原子化、归属明确且可正交组合。
pagination 是唯一合法的 Block 名
别写 pager、page-nav 或 pagination-wrapper——这些要么是动词、描述性短语，要么带“wrapper”这种伪容器词，直接破坏 BEM 的语义收敛性。行业通用术语就是 pagination，React 的 react-paginate、Vue 的 el-pagination、Ant Design 的 pagination 全部统一用它，开发者一眼能对齐意图。
如果项目里已存在全局 .pager，过渡方案是 pagination-legacy，而不是妥协命名或覆盖旧样式。真正该拆的不是“分页容器”，而是它内部的语义单元：页码项、跳转按钮、省略号、图标——它们必须严格归属 pagination，不能跨 Block 复用（比如把 pagination__item 拿去给面包屑用）。
pagination__item 和 pagination__link 必须职责分离
常见错误是把所有交互和布局逻辑全塞进 pagination__item：禁用态靠 opacity: 0.5 遮盖、焦点样式写在 item 上、aria-current 也挂 item 上。结果改一个背景色，可访问性、键盘导航、点击区域全崩。
-
pagination__item只管三件事：是否显示（display: none）、是否禁用（视觉灰显 +pointer-events: none）、水平排列与间距（flex布局、gap、margin） -
pagination__link才是交互主体：必须带role="button"或role="link"、处理:hover/:focus、绑定aria-current="page"、控制cursor和tabindex - 禁止出现
pagination__item-link：-link是动词后缀，BEM 要求 Element 必须是名词；工具链（如stylelint-selector-bem-pattern）会直接报错
Modifier 必须原子化且归属明确
写 pagination__item--active--compact 是典型失控信号：它既没法单独启用 --compact，也无法和 --disabled 正交组合，自动化测试根本覆盖不到。
立即学习“前端免费学习笔记（深入）”；
-
pagination--compact影响整个组件：缩小padding、减小字体、压缩gap，修饰符挂 Block 上 -
pagination__item--active只作用于单个项：加背景色、加粗文字、移除链接行为，修饰符挂 Element 上 - 多个 Modifier 并列使用：
class="pagination__item pagination__item--active pagination--compact"，不是字符串拼接 - 禁用态同理：
pagination__item--disabled控制该项，pagination--disabled控制整个分页器不可操作
省略号、图标等非专属元素不能硬塞进 pagination__item
「…」省略号或「下一页」箭头图标，如果它们在搜索结果页、表格页等多个场景复用，就不是 pagination 的专属元素，而是独立 Block。
正确做法：<span class="ellipsis">…</span>，其中 ellipsis 是独立 Block；若图标仅服务分页且无定制需求，可命名为 pagination__icon；否则应升为 icon Block，并用修饰符隔离上下文：icon--in-pagination-next。
最容易被忽略的，是 Modifier 的归属判断：每个修饰符必须只表达一个可开关、可测试、可文档化的状态，且不依赖上下文。一旦开始写 --small-active 这种复合名，说明结构已经失控了。
