推荐使用 radio-group 作为块，radio-group__item 为元素，radio-group__control 和 radio-group__label 为子元素，状态由 js 控制并添加修饰符类（如 radio-group__item--checked），避免 :checked 伪类与兄弟选择器破坏封装性，隐藏原生 radio 时需保留可访问性。
radio 按钮的 BEM 命名怎么写才不混乱
直接用 .form__radio 或 .control--radio 容易和复选框、开关混用，也难扩展状态。BEM 的关键是「块-元素-修饰符」必须反映真实 DOM 关系和语义层级。
推荐结构：每个单选组是一个独立 block，比如 radio-group；每个选项是它的 element，即 radio-group__item；原生 <input type="radio"> 不暴露为元素，只作为语义载体；自定义视觉部分（圆点、标签、勾选效果）统一归入 radio-group__control 和 radio-group__label。
-
radio-group是块，包裹整个单选逻辑区域 -
radio-group__item是直接子元素，每个含一个<input>+<label></label> -
radio-group__control是 label 内的伪元素容器（不写 HTML，纯 CSS 生成） -
radio-group__label是可点击文本，必须与 input 关联（for或嵌套） - 选中态用
radio-group__item--checked，由 JS 切换类，而非依赖:checked直接样式
为什么不用 :checked + ~ 直接控制显隐或样式
在 BEM 场景下，:checked ~ .radio-group__panel 这类兄弟选择器会破坏块封装性——.radio-group__panel 可能属于另一个 block（比如 form-section），强行用兄弟选择器耦合，会导致样式泄漏、复用困难、测试不可靠。
更稳的做法是让 JS 控制 radio-group 块级状态，再通过 radio-group--active-choice="changeLocation" 这类数据属性驱动子区域显隐，CSS 只响应类或属性，不依赖 DOM 位置关系。
-
:checked适合纯展示型表单，但业务表单常需联动 Select2、日期控件等第三方组件，它们不响应伪类变化 - 兄弟选择器无法跨 block 作用域，而 BEM 要求每个 block 自包含
- 键盘导航（Tab → 空格）触发
:checked时，CSS 动画可能不同步，造成视觉卡顿
隐藏原生 radio 的 BEM 兼容写法
BEM 不反对隐藏原生控件，但必须保证它仍可聚焦、可读屏、可被 JS 正确读取 value。不能用 display: none 或 visibility: hidden，否则 radio-group__item--checked 就失去依据。
标准做法是在 radio-group__item 内部用绝对定位把 <input class="radio-group__input"> 移出视口，同时保留 tab index：
`.radio-group__input {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
margin: 0;
padding: 0;
overflow: hidden;
}`
- 不要用
clip-path: inset(50%)—— Safari 15.4 之前不支持，且部分读屏器识别不稳定 - 必须确保
<label></label>包裹或通过for显式关联，否则点击无效 -
radio-group__input的 name 属性值要统一，这是浏览器单选行为的唯一依据，BEM 类名不能替代它
选中态动画和焦点反馈怎么加才符合 BEM 原则
动画不是装饰，而是状态确认信号。BEM 要求所有视觉反馈都来自明确的修饰符类，而不是靠伪类链式触发。
比如圆点填充动画，应由 radio-group__control--checked 类控制，该类由 JS 在 input change 后添加到对应 radio-group__item 的子元素上：
`.radio-group__control {
display: inline-block;
width: 18px;
height: 18px;
border: 2px solid #999;
border-radius: 50%;
vertical-align: middle;
margin-right: 8px;
transition: all 0.2s ease;
}
.radio-group__control--checked {
background-color: #007bff;
border-color: #007bff;
}
.radio-group__control--checked::after {
content: "";
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: white;
margin: 4px;
}`
- 动画时间控制在 0.2–0.3s，过长显得迟滞，过短难感知
- 焦点样式（
radio-group__control:focus-within）必须显眼，至少有 2px 蓝色外发光 - 不要用
input:focus + .radio-group__control—— input 已被隐藏，:focus 不会触发
js-radio-active 这样的反模式类。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
