排行榜bem需按可复用边界和职责分离规划：ranking-list、rank-item、sort-control等须为独立block，禁止嵌套命名；响应式与主题变体统一收口至layout-responsive.css和_theme.css，确保结构、皮肤、状态分层解耦。
排行榜页面的 BEM 层级不能按“看起来像一块”来切分，而要按可复用边界和职责分离来规划。把整个 ranking-page 当作顶层 block 是典型错误——它不可复用、无法独立测试、样式必然泄漏。
排行榜主体必须拆成独立 block：ranking-list
排行榜数据容器（含排序、加载状态、空态）应封装为 ranking-list，不是 ranking-page__list。原因很实际：
-
ranking-list可被复用于活动页、后台管理页、甚至弹窗内嵌 - 它的排序按钮、刷新逻辑、骨架屏都属于自身职责，不该依赖父级上下文
- DOM 结构变动（比如加个
div包裹）不会导致ranking-page__list__item失效 - 对应文件路径必须是
src/components/RankingList/RankingList.module.scss，且只允许出现以ranking-list开头的类名
榜单项（rank-item）必须是 block，不是 element
每个榜单条目不能写成 ranking-list__item，而应是独立的 rank-item 块。常见错误现象：
- 写
ranking-list__item--top-3→ 一旦榜单只显示前 5 名，这个修饰符就语义错乱 - 用
ranking-list__item__avatar→ avatar 实际可能复用于用户资料页，硬塞进 ranking-list 就失去复用性 - 缩进靠
.ranking-list__items .ranking-list__item:first-child→ 权重高、结构脆弱、JS 插入新节点后样式失效
正确做法：每个 rank-item 自带 data-rank="1" 属性，CSS 用 .rank-item[data-rank="1"] 控制金杯图标或背景色；头像用 rank-item__avatar，但它是 rank-item 的元素，不是全局 avatar 组件。
排序控件、筛选栏必须升格为独立 block
页面顶部的排序下拉、时间范围选择器、搜索框，绝不能叫 ranking-page__sort 或 ranking-page__filter。它们各自具备完整交互逻辑和可复用场景：
-
sort-control：负责排序字段切换、方向图标、本地缓存策略 -
date-range-picker：可被报表页、日志页复用，自带预设区间快捷按钮 -
search-bar：带防抖、清空按钮、搜索历史建议，与排行榜数据解耦
它们在 HTML 中与 ranking-list 并列，不嵌套；CSS 文件各自独立，ranking-list.css 里绝对不出现 sort-control 相关样式。否则，某天产品要求“首页也加排序”，你就得复制粘贴一堆耦合代码。
响应式与主题变体必须收口到统一层
排行榜的移动端折叠、暗色模式、紧凑尺寸，不能靠 ranking-list--mobile 或 ranking-list__item--dark 散落在各处。真实项目里最容易被忽略的是：
- 媒体查询必须统一收口到
layout-responsive.css，禁止在ranking-list.module.scss里写@media (max-width: 768px) - 主题变量用 CSS 自定义属性：
--ranking-bg、--ranking-text-primary，由_theme.css提供值，block 内只用background: var(--ranking-bg) - 紧凑模式是
ranking-list--compact，但它只控制行高、内边距等布局参数，不改字体大小或图标尺寸——后者属于皮肤层，归主题系统管
层级越深，越容易把“结构”“皮肤”“状态”混在一起。BEM 不是字符串游戏，是工程约束：每个块只解决一类问题，每类问题只在一个地方配置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
