自定义滚动条伪元素必须通过容器类名+伪元素选择器（如.scrollbar--dark::-webkit-scrollbar-track）匹配，纯.scrollbar__track类名无效；BEM修饰符用于容器控制主题，Firefox需用scrollbar-color回退，无法支持复杂样式。
自定义滚动条的伪元素无法匹配普通类名
浏览器只允许 ::-webkit-scrollbar 及其子部件（如 ::-webkit-scrollbar-track）通过属性选择器或标签+伪元素组合来命中，.scrollbar__track 这类纯类名选择器完全无效。BEM 类名在这里不是“钩子”，而是“作用域开关”——它必须作为容器的 class 属性值存在，再在伪元素规则中用属性选择器显式引用。
常见错误现象：
写了 .scrollbar__track { background: #333; }，但滚动条轨道毫无反应 → 选择器根本没生效；
给容器加了 class="scrollbar" 却没写任何带修饰符的伪元素规则 → 样式不触发。
- 必须把 BEM 修饰符（如
--dark）加在滚动容器上：<div class="scrollbar scrollbar--dark"> - 伪元素规则要严格对应：
.scrollbar--dark::-webkit-scrollbar-track，而不是.scrollbar__track - 所有伪元素规则都必须挂载在**实际有滚动行为的容器**上（即设置了
overflow: auto或scroll且内容溢出）
多主题滚动条该用修饰符还是新 Block
用修饰符（--dark、--compact）是正确做法，但前提是这些变体仅影响视觉表现，不改变结构或交互逻辑。Firefox 不支持 ::-webkit-scrollbar，必须靠 scrollbar-width 和 scrollbar-color 回退，而这两个 CSS 属性只接受颜色和宽度字面量，无法响应类名切换——所以主题一致性必须靠 JS 或构建时条件编译兜底。
- 同一页面多个滚动区域需不同主题？统一用
.scrollbar--dark、.scrollbar--minimal等修饰符控制整套规则 - 不要为每个主题新建 Block（如
.scrollbar-dark），否则无法复用基础样式和 JS 行为绑定 -
scrollbar-color: #666 #eee这类声明只能写在修饰符规则里，不能抽离成独立类，否则 Firefox 下会失效
为什么不能把滚动条部件单独抽象成 Block
滚动条没有独立 DOM 节点，它的所有伪元素都依附于宿主容器渲染。试图定义 .scrollbar-track 作为独立 Block，既违反 BEM “Element 不能脱离 Block 存在” 原则，又在技术上不可行——你根本无法在 HTML 中写出 <div class="scrollbar-track"> 并让它生效。
立即学习“前端免费学习笔记（深入）”；
-
.scrollbar__track这类命名看似合理，实则误导：它不会被任何伪元素规则匹配到 - BEM 的
__是语义层级标识，不是 DOM 结构映射；滚动条部件之间无父子 DOM 关系，只有浏览器渲染时的视觉层级 - 真正需要隔离的是“哪套样式被启用”，而不是“哪个部件被定义”——所以修饰符必须作用于容器，而非虚构的子元素
兼容性处理中容易忽略的关键点
Chromium/Safari 用 ::-webkit-scrollbar 系列，Firefox 用 scrollbar-width/scrollbar-color，两者语法和能力完全不同。BEM 修饰符能统一触发两套规则，但无法掩盖底层差异——比如 scrollbar-color 不支持圆角、阴影或背景图，而 WebKit 下可以。
- 不要指望
.scrollbar--dark在 Firefox 下也能渲染出深色轨道图标——它最多只能设两个颜色值 - 若需精细控制 Firefox 滚动条，只能放弃原生方案，改用 JS 模拟（如
locomotive-scroll），此时 BEM 应按真实 DOM 结构命名（如.c-scrollbar__track） - 所有 WebKit 伪元素规则必须写在同一个 CSS 文件中，避免被 CSS-in-JS 工具误删（它们常过滤掉疑似无效的选择器）
