分页器应拆为三个独立 Block：.pagination-controls、.pagination-pages、.pagination-jump；页码数字若跨组件复用（如时间轴、步骤条），应升为独立 .page-number 块，而非 Element。
分页器该拆成几个 Block，而不是一个 .pagination
直接写 .pagination 是最常见错误——它看起来像块，但实际可能是多个职责混杂的视觉容器。真实项目里，分页器通常包含三部分：控制区域（上一页/下一页按钮）、页码列表、跳转输入框。它们复用场景不同：.pagination-controls 可能单独用在表格底部，.pagination-pages 会出现在搜索结果和商品列表，.pagination-jump 则只在后台管理出现。
所以正确做法是拆成三个独立 Block：.pagination-controls、.pagination-pages、.pagination-jump。每个都可单独 import、测试、复用，互不干扰。
-
.pagination-controls包含.pagination-controls__prev和.pagination-controls__next -
.pagination-pages的子元素只能是.pagination-pages__item，不能叫.pagination-pages__page-item（冗余） - 如果跳转框也带“确认按钮”，别塞进
.pagination-jump里，另起一个.pagination-submit块更干净
页码数字该算 Element 还是独立 Block？
看它是否跨上下文复用。如果 1、2、…、10 这些数字样式和交互逻辑，在分页器、时间轴、步骤条里完全一致（比如都带圆角、hover 高亮、禁用态灰掉），那它就不是 .pagination-pages__number，而该是独立的 .page-number 块。
否则，一旦设计改了“当前页高亮色”，你得去改所有 .pagination-pages__item--current、.timeline-step__item--current，而不是只动一处 .page-number--current。
立即学习“前端免费学习笔记（深入）”；
- 判断依据：能否脱离父级存在并保持语义完整？
.page-number可以，.pagination-pages__item不行 - Element 名必须是名词，
.pagination-pages__item合规，.pagination-pages__go-to-page违规（动词+功能描述） - 如果某天要给页码加 tooltip，不要写
.pagination-pages__item__tooltip—— tooltip 应该是独立.tooltip块，通过属性或 wrapper 控制作用域
current / disabled / ellipsis 这些状态怎么写 Modifier
修饰符必须表达意图，而非实现细节。.page-number--current 正确，.page-number--blue-bg 错误；.pagination-controls__prev--disabled 合规，.pagination-controls__prev--hidden 危险（隐藏是 JS 控制的结果，不是设计状态）。
-
--current表示“当前选中页”，语义稳定，换主题也不用改名 -
--disabled表示“不可点击”，和 HTMLdisabled属性对齐，JS 可直接增删 -
--ellipsis用于省略号项，不是视觉描述（不写--dots或--three-dots） - 禁止连缀：
.page-number--current--disabled❌，应写成.page-number--current .page-number--disabled✅，组合自由，调试时也容易定位
Sass 中怎么避免编译出后代选择器破坏封装？
SCSS 里一不小心就会写出 .pagination-pages { &__item { &__icon { ... } } }，结果编译出 .pagination-pages__item .pagination-pages__item__icon —— 这个空格等于开了后门，样式会泄漏到任意嵌套层级。
真正安全的写法只有一层嵌套：
.pagination-pages {
&__item {
// 样式
}
&--compact {
// 修饰符
}
}
- 遇到“页码项里的图标”，不要硬加
__icon，先问：这个图标是否在其他地方复用？如果是，抽成.icon块；如果只在这里出现且无交互，用伪元素或 background 更轻量 - 想控制“当前页码项里的文字颜色”？直接写
.page-number--current .page-number__text，但前提是.page-number__text真实存在且语义合理 - 工具链建议：配
stylelint-selector-bem-pattern规则，自动报错.pagination-pages__item .icon这类带空格的选择器
.pagination__item--current 和 .page-number--current 之间反复横跳，本质是没理清组件边界——只要某个视觉单元在两个以上业务场景中出现，且行为一致，它就该升为 Block。 
