pagination 是唯一合理的 Block 名，因其是行业通用名词、符合 BEM 名词原则、避免状态冲突且具业务含义；子元素需严格归属，Modifier 必须原子化、不可嵌套。
直接用 pagination 作 Block 名，别写 page-nav 或 pager——前者语义模糊，后者是动词，BEM 要求 Block 必须是名词、可复用、带业务含义。
为什么 pagination 是唯一合理的 Block 名
很多团队一开始会纠结“叫 pager 还是 page-nav”，但 BEM 不是取名比赛，而是结构约束。一旦你写成 pager__next，后续在弹窗里嵌一个分页时，就会发现 pager 和主页面的 pager 状态逻辑冲突（比如都监听 click 却触发不同行为）。而 pagination 是行业通用术语，React 生态里 react-paginate、Vue 里 el-pagination 都用它，开发者一眼能对齐组件意图。
-
pagination表示“分页功能模块”，不是容器或样式描述，不带位置（如top-pagination）或视觉词（如small-pagination） - 所有子元素必须严格属于它，不能跨 Block 复用类名（比如把
pagination__item拿去给面包屑用） - 如果项目里已有全局
.pager，就用pagination-legacy作为过渡名，避免直接覆盖
pagination__item 和 pagination__link 怎么分
常见错误是把页码数字和跳转按钮混成一类，比如全写成 pagination__item，结果无法单独控制链接样式或禁用状态。正确做法是：页码数字、上一页、下一页、首页、尾页，统一为 pagination__item；它们内部的可点击部分（含文字、图标）才是 pagination__link。
-
pagination__item负责布局（如 flex 排列、间距）、禁用态灰显（opacity: 0.5） -
pagination__link负责交互（cursor: pointer、:hover）、焦点样式、访问性（role="button"） - 不要写
pagination__item-link——BEM 不允许元素名里再带“-link”，这违反“Element 必须是名词”原则
pagination--compact 和 pagination__item--active 的叠加规则
Modifier 不是 CSS 类拼接游戏，它只表达原子状态。比如“紧凑模式+当前页”必须写成两个独立类：pagination--compact pagination__item--active，而不是 pagination__item--compact-active。
立即学习“前端免费学习笔记（深入）”；
-
pagination--compact影响整个组件：减小padding、缩小字体、压缩gap -
pagination__item--active只作用于单个页码项：加背景色、加粗文字、移除链接行为 - 禁止嵌套 Modifier：
pagination__item--active--compact是错的，会导致工具链（如stylelint-selector-bem-pattern）报错，也破坏状态可组合性 - 如果需要响应式紧凑态，用媒体查询包裹
pagination--compact，而不是新增pagination--mobile
跳转输入框和确认按钮的命名陷阱
分页插件常带“跳至第 X 页”功能，这里最容易写出反模式类名：pagination__goto、pagination__jump-input。动词（goto/jump）不能当 Element 名，因为它描述行为而非结构角色。
- 输入框应命名为
pagination__jump-field（field 是名词，表示表单控件） - 确认按钮命名为
pagination__jump-submit（submit 是名词，指提交动作的载体） - 它们的状态修饰符只能是
--disabled、--invalid这类标准交互态，不能是--loading（那是 JS 层面的 loading 状态，应由 JS 控制添加pagination__jump-submit--loading类） - 如果跳转功能被抽成独立组件（比如
PageJump），就该脱离paginationBlock，改用page-jump作为新 Block 名，避免强耦合
