pagination 必须是 Block，因其可独立复用、跨页面存在；页码按钮等为其 Element，命名如 pagination__item、pagination__prev；Modifier 应挂载到对应 Block 或 Element 上，如 pagination__item--current；SCSS 需避免嵌套过深导致后代选择器。
pagination 组件该定义为 Block 还是 Element
必须是 Block。pagination 是一个可独立复用、跨页面存在的功能单元：它能在商品列表页、文章归档页、API 分页响应中被原样使用，不依赖父容器语义。常见错误是写成 .page-nav 或 .pager ——前者含动词（nav），后者模糊无业务指向；也不该叫 .footer__pagination，那只是把它降级为某个 footer 的子元素，失去复用前提。
合格的 Block 名要满足两个条件：名词 + 角色，比如 pagination-controls、data-table__pagination（若仅用于表格内且不外泄）或直接 pagination（短、通用、无歧义）。注意：pagination 不等于 HTML 的 <nav> 标签名，而是表达「控制分页行为的 UI 单元」这一完整语义。
页码按钮、上一页/下一页这些算 element 还是独立 block
它们是 pagination 的 Element，但有边界条件：只要自身不跨场景复用，就保持为 Element；一旦在搜索弹窗、详情页侧边栏等多处高频出现，就要升为独立 Block，比如 pagination-item 或 pagination-arrow。
当前多数项目中，它们仍属 Element，命名应为：
立即学习“前端免费学习笔记（深入）”；
-
pagination__item✅（不是pagination__page或pagination__number，避免视觉/实现细节） -
pagination__prev✅（不是pagination__previous，过长且动词化） -
pagination__next✅ -
pagination__ellipsis✅（表示省略号，非pagination__more这类模糊词）
禁止出现 pagination__item__icon 或 pagination__prev__arrow —— BEM 不允许 Element 嵌套 Element，三层命名说明结构已超载，应拆出新 Block 或改用 Modifier。
当前页、禁用态、加载中这些状态怎么写 modifier
Modifier 必须挂到 Block 根上，而不是单个 Element 上，除非该状态**只影响该 Element 自身且与其他部分完全解耦**（极少见）。
典型正确写法：
-
pagination--disabled✅（整个分页器不可操作，所有子元素统一降权） -
pagination--loading✅（显示加载骨架，覆盖全部交互区域） -
pagination__item--current✅（仅当前页码高亮，不影响 prev/next 行为） -
pagination__item--disabled✅（仅某页码不可点，比如第一页的 prev 按钮）
常见错误：
-
pagination__current❌（裸类名，无归属，无法回答“属于哪个分页器”） -
pagination--current-item❌（Modifier 不该描述结构关系，“当前项”是pagination__item的状态，不是pagination的变体） -
pagination__item--active❌（--active暴露 JS 事件细节；--current才对齐业务语义）
多个 Modifier 可平级叠加：pagination__item pagination__item--current pagination__item--large，顺序无关，但建议按“类型→尺寸→状态”排列，便于人眼识别。
SCSS 中怎么写才不产出后代选择器
关键看编译输出是否全是扁平类名。BEM 的封装性全靠这个——CSS 文件里不能出现空格连接的选择器。
安全写法（单层嵌套）：
.pagination {
&__item {
padding: 4px 8px;
}
&--loading {
opacity: 0.6;
}
&__item--current {
font-weight: 600;
}
}危险写法（会产出后代选择器）：
.pagination {
&__item {
&__icon { /* 编译为 .pagination__item .pagination__item__icon → 违规 */ }
}
&__prev &__next { /* 编译为 .pagination__prev .pagination__next → 后代选择器，DOM 移动即失效 */ }
}真实项目中，如果需要图标，直接定义 pagination__prev-icon，不要试图在 __prev 下再塞一层结构。Sass 的 & 很方便，但一多嵌套就破界，必须手动检查编译结果。
最易被忽略的一点：HTML 中每个 Element 都必须显式携带 Block 类。不能只写 <button class="pagination__item">5</button>，而漏掉根类；否则 DevTools 里看不到上下文，调试时会以为样式没生效，其实是选择器匹配失败。
