必须用.btn--disabled而非.btn-disabled或.btn_disabled，因BEM规范规定--是修饰符唯一合法分隔符；否则会被误判为独立块名或无效类，导致构建误删、DevTools无法识别状态。
按钮状态类名必须用--前缀，不能写成.btn-disabled或.btn_disabled
这是 BEM 语义的底线。修饰符（Modifier）必须用双连字符--与块名分隔，否则它就不是修饰符，而是一个普通类名——CSS 里看不出它是临时状态还是固有变体，协作时容易误改或覆盖。
常见错误：.btn-disabled会被当成独立组件；.btn_disabled下划线在 BEM 中不表状态；正确写法只有.btn--disabled、.btn--loading、.btn--success这一种形式。
-
.btn--primary和.btn--disabled是正交的，可自由组合，不依赖顺序 - 禁止嵌套写法：
.btn--primary--disabled语义模糊，破坏单一职责 - JS 添加类时必须用
element.classList.toggle('btn--disabled', isDisabled)，避免字符串拼接漏空格或覆盖其他类
多个状态共存时，CSS 规则要显式声明组合效果，不能靠层叠“碰巧生效”
BEM 允许多修饰符共存，比如.btn--disabled.btn--loading，但 CSS 不会自动合并样式。如果.btn--loading定义了cursor: wait，而.btn--disabled写了pointer-events: none，那最终表现取决于哪条规则权重高、写在后面——不是 class 顺序决定的，是 CSS 层叠顺序。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 高频动态状态（如
--loading）建议写在 CSS 文件靠后位置，避免被静态状态覆盖 - 需要叠加视觉效果时，必须单独写组合选择器：
.btn--disabled.btn--loading { opacity: 0.6; } - 不要写
.btn--disabled--loading，这不是 BEM 合法语法，也不利于 JS 动态控制 - 如果
--error和--loading同时出现，且需禁用动画，就得显式重置：.btn--error.btn--loading .spinner { animation: none; }
状态样式必须绑定具体 UI 表现，别用业务词命名如--pending或--failed
修饰符名要是“人一眼看懂它干了什么”的词，而不是“后台返回了什么”。.btn--busy不如.btn--loading清晰，因为前者没说明是否有转圈图标、是否禁用点击；.btn--network-error太重，UI 层不该感知网络层细节。
- 优先用行为/视觉关键词：
--hover、--focused、--expanded（注意：这些是伪类对应状态，BEM 修饰符一般不用它们，但--loading、--success这类可编程状态必须用） - 布尔状态可加
--is-前缀：.modal--is-open，但按钮场景更常用--idle/--submitting/--error这种明确阶段词 - 禁止通配匹配：
[class*="is-"]会命中第三方组件里的is-active之类，造成意外样式污染 - SSR 场景下，服务端必须和客户端输出完全一致的修饰符，否则 hydration 会出错或闪屏
别把disabled属性当样式开关，.btn--disabled必须配合真实交互控制
光写.btn--disabled { opacity: 0.5; cursor: not-allowed; }不够。原生button[disabled]会阻止所有交互，但 JS 渲染的按钮可能没设disabled属性——这时候仅靠 CSS 样式无法满足 WCAG 2.1，焦点仍可进入，键盘用户能按空格触发。
-
.btn--disabled样式里建议加pointer-events: none作补丁，但它会彻底阻断 focus，某些只读表单需要保留 focusable 状态，此时应改用tabindex="-1"+aria-disabled="true" - JS 切换状态时，要同步操作 DOM 属性：
button.disabled = isDisabled，不能只切 class - 避免用
!important强行覆盖:hover，说明选择器权重设计有问题；应确保.btn--disabled:hoverspecificity 高于.btn:hover - 如果项目用 Tailwind 或 styled-components，
--disabled类最好只作 data hook 或 JS 行为触发点，视觉交给disabled:变体或 props 插值
真正难的不是写对一个.btn--loading，而是当--disabled、--error、--success、--submitting四个状态可能两两甚至三三共存时，CSS 规则之间有没有隐含覆盖、JS 是否漏掉某一种组合、SSR 是否和服务端状态对齐——这些地方一不留神就变成线上 bug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
