应使用 data-state 属性统一管理交互状态，配合 CSS 属性选择器（如[data-state="loading"]）和 classnames 库动态生成 class，避免手动拼接；group-hover 仅作用于直接子元素，控制父容器需用 peer/peer-checked 或 data-state；:hover 等伪类不可被 data-state 替代。
怎么用工具类库替代手写 .is-active 这类状态类
直接替换掉散落在 HTML 里的 is-active、is-open、has-error 等状态类，改用统一前缀 + 工具函数控制。核心是把“状态”从 class 名字里抽出来，变成可计算、可批量切换的逻辑。
常见错误是只改 class 名但没同步更新 JS 切换逻辑，导致点击后样式不响应；或者在多个组件里重复写 el.classList.toggle('is-active')，后续维护成本飙升。
- 选一个轻量工具类库，比如
clsx（JS）或tailwindcss的@apply+group/peer（CSS） - 所有交互状态统一用
data-state属性驱动，例如：<button data-state="loading">，再用 CSS 层级匹配：[data-state="loading"] { opacity: 0.6; } - 避免在 JS 中拼接字符串 class，改用
classList.toggle()配合常量，例如：const STATE_CLASSES = { active: 'active', disabled: 'disabled' };
tailwindcss 里怎么让 group-hover 正确作用于父容器状态
group 必须是触发元素的**直接祖先**，且不能跨 DOM 层级跳转。很多人写了 <div class="group"><button></button></div> 却在 button 里写 group-hover:opacity-100，结果无效——因为 group-hover 只能作用于 group 内部的**子元素**，不能反向影响 group 自身。
典型使用场景：下拉菜单展开时高亮父导航项、卡片悬停时显示隐藏操作按钮。
立即学习“前端免费学习笔记（深入）”；
- 要控制父容器自身状态，改用
peer+peer-checked组合，配合<input type="checkbox">或<details>这类原生状态控件 - 如果必须用 JS 控制，别依赖
group，直接操作data-state并用属性选择器匹配 -
group不支持嵌套多层，group group group不会逐级传递，只认最近一层group
为什么 classnames 比手动 el.className += ' active' 更安全
手动拼接 class 字符串会覆盖原有 class、引入重复值、漏掉空格、破坏 SSR 一致性。而 classnames 是纯函数，输入对象/数组，输出规范 class 字符串，天然防重、去空、兼容布尔键。
性能上几乎无差异，但可维护性差距极大：状态逻辑集中在一处，而不是散落在 if 分支和字符串拼接里。
- 错误写法：
el.className = el.className + ' is-active';—— 多次执行后变成is-active is-active - 正确写法：
el.className = cx({ 'is-active': isActive, 'is-disabled': isDisabled }); - 注意：SSR 渲染时若服务端和客户端 class 计算结果不一致，React 会警告并重新 hydrate，
classnames能保证两端一致
自定义 CSS 状态类时，[data-state="hover"] 为什么不能代替 :hover
:hover 是浏览器原生伪类，响应毫秒级、无需 JS、支持键盘焦点（:focus-within）、无障碍友好。[data-state="hover"] 是模拟行为，必须靠 JS 监听事件手动设置，容易丢帧、卡顿、不响应键盘导航。
真正该用 data-state 的地方，是那些 :hover 做不到的：比如“提交中”、“校验失败”、“离线模式”等非交互瞬时态。
- 别为了“统一风格”强行把
:hover全替换成data-state，这是拿 JS 解决本该由 CSS 完成的事 - 如果组件需要同时响应鼠标悬停和键盘聚焦，优先用
:is(:hover, :focus-within)，而不是监听两个事件再设data-state -
data-state值应为语义化名词（error、success），而非行为动词（hovering、clicking）
is-submitting，硬塞进全局工具库反而增加理解成本。 
