pagination是唯一合理的Block名，因其是行业通用名词、符合BEM名词原则、避免状态冲突且具业务含义；子元素需严格归属，Modifier必须原子化、不可嵌套。
pagination 是唯一该用的 Block 名，其他命名（如 pager、page-nav）都会在组件复用、状态隔离或团队协作时出问题。
为什么必须用 pagination 作 Block 名
BEM 要求 Block 必须是名词、可复用、带明确业务含义。pagination 是行业通用术语（React 的 react-paginate、Vue 的 el-pagination 都用它），开发者一眼能识别意图。写成 pager 会和动词语义冲突；page-nav 是描述性短语，违反“单一职责+可组合”原则。更实际的问题是：一旦你在弹窗里嵌一个分页，而主页面也用了 pager__next，两个点击逻辑就可能互相干扰——因为类名没隔离，状态也没收敛。
如果项目已有全局 .pager，过渡方案是 pagination-legacy，而不是覆盖或妥协。
pagination__item 和 pagination__link 怎么分工
常见错误是把所有东西都塞进 pagination__item，结果禁用样式、焦点行为、访问性属性全混在一起，改一处牵动八处。
立即学习“前端免费学习笔记（深入）”；
-
pagination__item只管布局：flex 排列、间距、禁用态灰显（opacity: 0.5）、是否隐藏（display: none） -
pagination__link只管交互：cursor: pointer、:hover、focus样式、role="button"、aria-current="page" - 禁止出现
pagination__item-link—— BEM 规定 Element 必须是名词，-link是动词后缀，直接破坏规范
Modifier 怎么叠加才不出错
Modifier 不是字符串拼接游戏，而是原子状态的独立标记。比如“紧凑模式 + 当前页”，必须写成两个类：pagination--compact pagination__item--active。
-
pagination--compact影响整个组件：缩小padding、减小字体、压缩gap -
pagination__item--active只作用于单个项：加背景色、移除链接行为、加粗文字 -
pagination__item--active--compact是非法写法：工具链（如stylelint-selector-bem-pattern）会报错；更严重的是，它让状态不可组合——你没法单独开“紧凑”关“当前页”，也无法和其他 Modifier（如--disabled）正交叠加
真正容易被忽略的，不是怎么写类名，而是 Modifier 的语义边界：每个 Modifier 必须只表达一个可开关、可测试、可文档化的状态，且不依赖上下文。一旦开始写 --small-active 这种复合名，说明结构已经失控了。
