根本原因是未厘清block归属与状态控制权：pagination是block，pagination__item仅负责布局与显隐，pagination__link专管交互与可访问性；modifier必须原子化、正交且归属明确。
分页组件的 BEM 类名混乱，根本原因不是不会拼写 __ 和 --，而是没理清「谁该是 Block」和「谁的状态该由谁控制」。直接套用 pagination__item--active 看似合规，但禁用态、焦点逻辑、可访问性属性全挤在同一个元素上，改一个样式就破三处交互。
pagination 是 Block，但 pagination__item 不是“子容器”，而是独立语义单元
很多人把 pagination__item 当作纯布局占位符，给它加 display: flex、gap、margin，结果禁用时只能靠 opacity: 0.5 遮盖，却忘了它本不该管交互行为。
-
pagination__item只负责：是否显示（display: none）、是否禁用（视觉灰显 + 移除指针）、水平排列与间距 -
pagination__link才是交互主体：必须带role="link"或role="button"、处理:hover/:focus、绑定aria-current="page" - 禁止出现
pagination__item-link——-link是动词后缀，BEM 要求 Element 必须是名词，否则工具链（如stylelint-selector-bem-pattern）会报错
Modifier 必须原子化，不能打包状态
写 pagination__item--active--compact 是典型错误：它既无法单独启用 --compact，也无法和 --disabled 正交组合，更没法被自动化测试覆盖。
- 紧凑模式影响整个组件：缩小
padding、减小字体、压缩gap→ 应用在 Block 上：pagination--compact - 当前页只作用于单个项：加背景色、移除链接行为、加粗文字 → 应用在 Element 上：
pagination__item--active - 禁用态同理：
pagination__item--disabled控制该项，pagination--disabled控制整个分页器不可操作 - 多个 Modifier 并列使用：
class="pagination__item pagination__item--active pagination--compact"，不是字符串拼接
当分页里嵌图标或省略号时，别硬塞进 __item
比如「…」省略号或「下一页」箭头图标，如果它们在多个组件（如搜索结果页、表格页）中复用，就不是 pagination 的专属元素，而是独立 Block。
- 正确做法：
<span class="pagination__item"><span class="ellipsis">…</span></span>，其中ellipsis是独立 Block - 若图标仅服务分页（无配色/尺寸定制需求），可命名为
pagination__icon；否则应升为iconBlock，并用修饰符隔离上下文：icon--in-pagination-next - 避免
pagination__item__ellipsis或pagination__item-icon—— 这违反 BEM 的平级声明原则，也破坏可复用性
最容易被忽略的，是 Modifier 的归属判断：它描述的是「谁变了」，而不是「在哪变」。写 pagination__item--in-mobile 是错的，因为这不是项自身的状态，而是父容器或视口条件决定的；这类逻辑该交给媒体查询或 wrapper 类（如 responsive-grid__item）处理，而不是污染分页组件的语义边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
