怎样用CSS BEM规范为分页器组件编写语义化类名？-css教程-PHP中文网

分页器应拆为三个独立 Block：.pagination-controls、.pagination-pages、.pagination-jump；页码数字若跨组件复用（如时间轴、步骤条），应升为独立 .page-number 块，而非 Element。

怎样用css bem规范为分页器组件编写语义化类名？

分页器该拆成几个 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。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

判断依据：能否脱离父级存在并保持语义完整？.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 表示“不可点击”，和 HTML disabled 属性对齐，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 这类带空格的选择器

BEM 在分页器上的难点不在命名规则，而在判断“哪些东西真能复用”。很多团队卡在 .pagination__item--current 和 .page-number--current 之间反复横跳，本质是没理清组件边界——只要某个视觉单元在两个以上业务场景中出现，且行为一致，它就该升为 Block。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！