segmented控件block名应为.segmented，滑块是独立block.segmented-thumb，选项项为.segmented__item，选中态用.segmented__item--active，禁用态为.segmented__item--disabled。
Segmented 控件的 Block 名怎么定
直接叫 .segmented 就行，别加 --control 或 __slider 后缀。它本身就是一个功能完整、可复用的 UI 组件：在表单、筛选栏、设置面板里都能独立出现，语义清晰，不依赖父容器。
常见错误是起名太结构化：.segmented-control 暗示它只是“控制”类组件，但实际它承载的是“选项切换”这个业务意图；.tabs-segmented 则强绑定了 tabs 场景，一旦用在筛选器里就名不副实。
- ✅ 合规命名：
.segmented、.segmented-group（强调一组互斥项） - ❌ 违规命名：
.segmented__wrapper（wrapper 不是语义块）、.ui-segmented（ui 前缀冗余，除非项目强制全局前缀如el-） - Block 名必须小写，单词间只用短横线，禁用下划线或驼峰
滑块（thumb）该算 Element 还是独立 Block
滑块不是 .segmented 的 __element，而是独立 Block：.segmented-thumb。
理由很实在：它在多个控件中复用——同样一个带圆角、阴影、过渡动画的滑块，可能也用在 range input、toggle、甚至自定义进度条里。一旦把它写成 .segmented__thumb，就锁死了它的使用边界，后续想抽离样式或逻辑就会卡住。
- 滑块有自己完整的状态（
.segmented-thumb--dragging）、尺寸变体（.segmented-thumb--large）、主题适配（.segmented-thumb--dark） - HTML 中必须显式声明：
<div class="segmented"><div class="segmented-thumb"></div></div>，不能靠 DOM 层级推导 - 如果真要表达“当前属于 segmented”，用修饰符更安全：
.segmented-thumb--in-segmented，而不是嵌套命名
选项项（item）和选中态（active）的 Modifier 写法
选项项是典型的 Element：.segmented__item，因为离开 .segmented 它无法独立存在——既没语义，也没样式上下文。
但“选中”这个状态不能写成 .segmented__item--selected 就完事。得区分它是视觉反馈还是受控状态：
- 视觉反馈（比如 hover/focus）：用
.segmented__item--hover、.segmented__item--focus，纯 CSS 控制 - 受控状态（JS 驱动的当前激活项）：必须用
.segmented__item--active，且由 JS 显式增删，不能靠:checked或伪类自动触发 - 禁用态必须作用于 item 本身：
.segmented__item--disabled，而不是.segmented--disabled .segmented__item（后者是后代选择器，破坏 BEM 封装）
SCSS 里怎么写才不崩掉 BEM 结构
在 SCSS 中只允许一层嵌套：&__item 和 &--active 是安全的；一旦出现空格，比如 &__item &__label，编译出来就是 .segmented__item .segmented__label —— 这是后代选择器，BEM 规则直接失效。
真实项目里，滑块和选项项经常需要联动样式（比如 active 时 thumb 移动到对应位置），这种关系不能靠 CSS 选择器硬连，而应由 JS 控制类名组合：
- ✅ 正确方式：
<div class="segmented"> <div class="segmented__item segmented__item--active"></div> <div class="segmented-thumb segmented-thumb--at-2"></div> </div> - ❌ 错误方式：在 SCSS 里写
.segmented__item--active + .segmented-thumb，把布局逻辑塞进样式层 - Modifier 值建议用位置索引（
--at-2）或语义键（--for-filter），避免写死像素值或颜色
最易被忽略的一点：BEM 不解决“滑块如何跟随选项移动”这个行为问题——那是 JS 的职责。CSS 只管“滑块在位置 2 时长什么样”，类名只是状态的快照，不是动作指令。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
