switch组件bem命名应为switch、switch__track、switch__thumb、switch--checked、switch--disabled；状态属修饰符而非元素，禁用switch__input等实现细节类名，外观与状态修饰符须分离。
Switch组件的BEM类名结构怎么定
直接说结论：Switch组件的BEM命名应严格遵循 block__element--modifier 三层结构，且 block 必须是语义明确的独立组件名（如 switch），不能用 toggle 或 checkbox 这类泛化词——否则会和原生控件或其它UI库冲突。
常见错误是把状态当元素，比如写成 switch__on 或 switch__off，这违反BEM原则：状态（on/off）属于修饰符（--checked、--disabled），不是元素。
-
switch：根块，代表整个可交互开关区域 -
switch__track：轨道（背景容器），不可单独存在，必须嵌套在switch内 -
switch__thumb：滑块（前景圆钮），视觉上移动的部分 -
switch--checked：修饰符，表示当前为开启状态 -
switch--disabled：修饰符，禁用态，影响整个组件交互与样式
为什么不能把 switch__input 当作公开类名
内部 <input type="checkbox"> 是实现细节，不是UI层暴露的元素。BEM只描述“用户可见、可交互的界面部分”，隐藏的原生表单控件不应出现在类名中——它不参与布局、不直接受CSS控制（通常用 opacity: 0 + position: absolute 覆盖）。
如果强行暴露 switch__input，会导致两个问题：
- 下游开发者可能误以为可以覆盖该节点样式，实际它被
pointer-events: none或定位遮挡，改了也没效果 - SSR 或框架（如React）中，服务端渲染时该节点可能被剥离或重命名，造成类名失效
正确的做法是：所有状态驱动的样式（如滑块位移、轨道颜色）全部通过 switch--checked 等修饰符作用于 switch__track 和 switch__thumb 上。
智能模型自动切换 V5.0.2 - 多模态感知，自动识别图片/视频/音频/代码/文本任务，切换最优模型。支持图片理解(qwen3-vl-plus)、视频音频(qwen3.5-plus)、代码(glm-5)、Office文档(MiniMax-M2.5)、推理等场景。零感知切换，无需手动操作。
修饰符命名要区分“状态”和“外观”
像尺寸（--sm）、主题色（--primary）这类纯外观变化，和 --checked 这种反映控件真实状态的修饰符，必须分开定义，避免耦合。
- 状态修饰符：
switch--checked、switch--disabled（必须由JS同步更新） - 外观修饰符：
switch--size-sm、switch--color-success（可静态写在HTML里）
注意：不要合并成 switch--checked-primary。复合修饰符在BEM中不推荐，维护成本高，且无法用CSS选择器高效匹配（.switch--checked.switch--color-primary 才是正确组合方式）。
实际CSS写法要注意哪些坑
最常被忽略的是 switch__thumb 的位移动画必须用 transform，而不是 left —— 否则在 switch--disabled 下取消动画时容易残留过渡效果；同时，switch--disabled 必须显式设置 pointer-events: none 在 switch 根节点，而不是只关掉 input。
示例关键片段：
.switch {
position: relative;
display: inline-flex;
align-items: center;
}
.switch__track {
width: 44px;
height: 24px;
border-radius: 12px;
background-color: #e0e0e0;
transition: background-color 0.2s;
}
.switch--checked .switch__track {
background-color: #2196f3;
}
.switch__thumb {
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
transition: transform 0.2s;
}
.switch--checked .switch__thumb {
transform: translateX(20px);
}
.switch--disabled {
opacity: 0.6;
pointer-events: none;
}
复杂点在于：所有状态切换必须由JS控制类名增删（不能依赖 :checked 伪类），否则 switch--disabled 下用户点击仍会触发原生 checkbox 切换——这是BEM组件封装时最容易漏掉的交互闭环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
