可复用的状态混入应定义为带默认参数的.state()，仅输出声明块，由调用者绑定具体类名（如.is-disabled { .state(); }），避免硬编码前缀、伪类混淆及权重冲突，确保多状态叠加时逻辑清晰可控。
直接用 .state() 混入生成 .is-active、.is-disabled 这类状态类，比手写重复规则快得多，也更易维护。
怎么定义可复用的状态混入
状态样式本质是同一组属性在不同布尔条件下的变体，比如 opacity、cursor、pointer-events、color。把它们抽成带参数的混入最稳妥：
-
.state(@opacity: 0.6, @cursor: not-allowed, @pointer: none, @color: #999)—— 参数按常用程度排序，留默认值 - 混入内部不写选择器，只输出声明块；调用时才绑定具体类名，比如
.is-disabled { .state(); } - 别在混入里硬编码
.is-前缀——前缀可能变（比如项目用.u-disabled），应由调用者控制 - 如果某状态需额外样式（如
.is-loading::after），另建专用混入，不塞进通用.state()
为什么不能用 &:hover 替代状态类
&:hover 是伪类，依赖用户交互；而 .is-disabled 是真实 class，能被 JS 控制、可测试、支持 SSR 渲染。两者用途完全不同。
- 混淆会导致逻辑错乱：比如按钮禁用后仍响应 hover 动画，视觉与行为矛盾
- 组件库或框架（如 Vue/React）常通过
:disabled或aria-disabled控制状态，CSS 类必须与之对齐 - 伪类无法用媒体查询覆盖（如深色模式下禁用态颜色），但 class 可以
如何避免状态样式被其他规则意外覆盖
CSS 层叠顺序是核心问题。状态类本身权重低，容易被后续规则压掉。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 确保状态混入调用位置靠后——比如在基础组件样式之后、主题覆盖之前
- 不要用
!important，而是提升选择器权重：用.btn.is-disabled而非单独.is-disabled - 若项目用 BEM，状态类应作为修饰符出现：
.btn--disabled，这样天然比.btn权重高 - 检查构建流程：某些打包工具会 CSS 压缩重排顺序，导致状态类编译后位置偏移
多状态叠加时怎么避免样式冲突
一个元素可能同时有 .is-disabled 和 .is-error，此时需明确优先级。
- 混入不处理叠加逻辑——那是使用者的责任。混入只保证单个状态干净输出
- 推荐用单一状态类 + JS 控制互斥：禁用时移除 error 类，反之亦然
- 真要共存，用嵌套写法显式覆盖：
.is-error.is-disabled { color: #666; }，而不是指望混入自动合并 - 避免在混入里写
& when (@state = disabled) and (@state = error)—— Less 不支持多条件匹配，会编译失败
状态类不是“写一次就不管”，关键是混入的参数设计是否贴合项目实际状态流转逻辑——比如是否需要支持过渡动画、是否要兼容 focus-visible 等细节，这些都得提前想清楚，否则后期改混入成本远高于重写几个 class。
