pagination组件应拆为1个独立block，即.pagination，对应独立文件_path.scss，不与列表、搜索框等混用，确保可复用、可单独预览、无外部类依赖。
pagination 组件该拆成几个 block？
它必须是独立 block，不能和列表、搜索框等混在一个父容器里。常见错误是把整个“用户管理页”当 block，写 .user-page__pagination——这会让分页器无法被复用到订单页、日志页，也进不了 Storybook 单独预览。
正确做法是单独定义 .pagination，配套文件路径为 _pagination.scss，且内部不引用任何其他 block 的类名（比如禁止在 _pagination.scss 里写 .search-bar__submit）。
- 它能脱离当前页面存在：复制 DOM 到空 HTML 中，加基础 JS（如点击翻页），就能跑通
- 它有明确角色：“控制数据分页行为”，不是“页面第2个section”这类描述性命名
- 它高频复用：后台系统里至少出现在 5+ 路由中
pagination__item 和 pagination__link 怎么区分？
关键看语义是否可剥离：如果去掉外层 .pagination，.pagination__item 仍能表达“一个分页按钮单元”的完整含义（含样式、交互边界），那它就是合法 element；但 .pagination__link 不能独立存在——它只是 item 内部的点击载体，没有自己的视觉边界或状态逻辑。
所以结构应为：
<nav class="pagination"><button class="pagination__item pagination__item--prev">上一页</button> <button class="pagination__item">1</button> <span class="pagination__item pagination__item--ellipsis">…</span> <button class="pagination__item pagination__item--next">下一页</button> </nav>
- 所有可点击/可聚焦单元统一用
.pagination__item，状态修饰挂在其上（如--prev、--disabled） - 不用
.pagination__link或.pagination__button——element 名不能带实现细节 - 若需自定义内容（如图标 + 文字），直接在
.pagination__item内写 HTML，不新增 element 层级
如何安全使用 Sass 的 &__ 嵌套？
只允许单层 &__item 和 &--disabled，禁用任何形式的嵌套组合，否则会产出后代选择器，破坏 BEM 封装性。
正确写法：
.pagination {
&__item {
display: inline-flex;
align-items: center;
}
&--compact {
font-size: 0.875rem;
}
}
错误写法（编译后变成 .pagination__item .pagination__icon，DOM 一动就失效）：
.pagination {
&__item {
&__icon { /* ❌ 禁止 */ }
}
}
- 遇到“item 里的图标”，优先考虑抽成独立 block：
.icon，再通过.pagination__item--has-icon控制布局 - 所有 modifier 必须可枚举：
--disabled、--compact、--large✅；--v2、--mobile、--blue❌ - modifier 不绑定视觉值：
--primary可通过 CSS 变量切换颜色，--blue一旦设计改色就得全局搜替换
分页器要不要支持打印分页控制？
要，但必须用现代标准。别只写 page-break-inside: avoid，它已被 W3C 标记为弃用。
实际项目中，直接在 .pagination 上加：
@media print {
.pagination {
page-break-inside: avoid;
break-inside: avoid;
}
}
- 双写是为兼容老浏览器（IE11、旧版 Edge），新浏览器只认
break-inside - 避免对
.pagination__item单独设分页规则——它本身是行内元素，且打印时通常折叠为一行数字，无需干预 - 真正需要控制分页的是包裹分页器的容器（如
.data-table-wrapper），那个层级才该加break-inside: avoid
BEM 最容易被忽略的点，是把“能复用”当成“已复用”。一个 .pagination 类名写出来不难，但它的 SCSS 文件是否真的没引入外部依赖？它的 modifier 是否在三个以上页面验证过响应式表现？它的 .pagination__item--disabled 是否和 JS 的 isDisabled 状态完全对齐？这些细节不卡点检查，BEM 就只剩一层皮。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
