分页器可配置性取决于modifier语义正交、归属清晰、可独立开关组合；pagination是block，pagination__item只负责显隐、禁用、基础排列，交互由pagination__link承担，modifier须原子化且平级叠加。
分页器的可配置性不取决于类名写得多长，而在于 Modifier 的语义是否正交、归属是否清晰、能否被独立开关和组合。强行把“当前页+禁用+紧凑”塞进一个类名里，等于提前放弃配置能力。
pagination 是 Block，但 pagination__item 不是容器
很多人把 pagination__item 当作布局盒子，给它加 display: flex、gap、margin，结果禁用时只能靠 opacity: 0.5 遮盖，却忘了它本不该承载交互逻辑。真正该管布局的只有 pagination 自身：比如控制整体对齐、间距、换行行为；pagination__item 只负责三件事：
- 是否显示（
display: none） - 是否禁用（视觉灰显 +
pointer-events: none） - 水平排列与基础间距（不依赖父级 flex 属性）
所有交互行为——hover、focus、键盘导航、aria-current="page"——必须由 pagination__link 承担。禁止出现 pagination__item-link，因为 -link 是动词后缀，BEM 要求 Element 必须是名词。
Modifier 必须原子化，不能打包状态
写 pagination__item--active--compact 是典型错误：工具链会报错，更严重的是它让状态无法单独启用或测试。每个 Modifier 应只表达一个可开关、可文档化的状态：
-
pagination--compact：影响整个组件，缩小 padding、字体、gap -
pagination__item--active：只作用于单个项，加背景色、移除链接行为、加粗文字 -
pagination__item--disabled：控制该项禁用态，不干扰其他 Modifier
多个 Modifier 并列使用：class="pagination__item pagination__item--active pagination--compact"。不是字符串拼接，而是状态叠加。一旦开始写 --small-active 这类复合名，说明结构已经失控了。
省略号、箭头图标不能硬塞进 __item
「…」省略号或「下一页」箭头图标，如果在搜索页、表格页等多处复用，就不是 pagination 的专属元素，而是独立 Block。正确做法是：
- 用独立
ellipsisBlock，而非pagination__ellipsis - 若图标仅服务分页且无定制需求，可命名为
pagination__icon - 否则应升为
iconBlock，并用修饰符隔离上下文：icon--in-pagination-next
禁止 pagination__item__ellipsis 或 pagination__item-icon —— 这违反 BEM 平级声明原则，也破坏可复用性。真正容易被忽略的，不是怎么拼写类名，而是 Modifier 的语义边界是否清晰：它必须不依赖上下文，能被自动化测试覆盖，也能被 JS 独立添加或移除。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
