hover等伪类交互不应使用bem修饰符管理，应直接用.btn:hover；disabled状态须同时用.btn--disabled类和原生disabled属性；业务状态如loading必须由js控制class增删。
hover状态不该用BEM修饰符管理
伪类交互（如 :hover、:focus）不是业务状态，BEM修饰符不负责这类纯视觉反馈。用 .btn--hover 不仅冗余，还会让样式逻辑混乱：JS 无法触发它，测试难覆盖，且浏览器原生伪类更轻量、无障碍支持更好。
正确做法是直接写 .btn:hover，和基础类同级声明：
.btn { background: #007bff; }
.btn:hover { background: #0056b3; }
.btn:active { transform: translateY(1px); }
如果需要禁用 hover 效果（比如在 .btn--disabled 下），用组合选择器控制：
.btn--disabled:hover { background: inherit; cursor: not-allowed; }
- 别在 JS 里手动加
btn--hover类——这是反模式，混淆了“可编程状态”和“用户交互反馈” - 若设计要求 hover 行为受业务逻辑控制（如权限关闭后连悬停都消失），那说明它已不是纯交互，应改用
.btn--no-interaction这类语义化修饰符
disabled状态必须用--disabled修饰符 + 同步disabled属性
.btn--disabled 是合法且必要的 BEM 修饰符，但它只管样式；DOM 层面的禁用必须靠原生 disabled 属性，否则键盘用户仍能聚焦、屏幕阅读器无法识别、表单提交逻辑可能出错。
HTML 必须同时存在：
<button class="btn btn--disabled" disabled>提交中</button>
对应 CSS 只需专注外观：
.btn--disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none; /* 辅助：防点击穿透 */
}
- 漏掉
disabled属性是常见硬伤，光靠样式无法满足 WCAG 2.1 标准 -
pointer-events: none是补丁，不能替代disabled—— 它会阻止所有事件，包括focus，而某些场景（如只读表单）需要保留 focusable 状态 - 避免用
!important强行覆盖:hover，说明选择器权重设计有问题；应确保.btn--disabled:hover的 specificity 高于.btn:hover
多个状态共存时，class 顺序不影响渲染但影响可读性
CSS 不关心 class 列表顺序，.btn--primary.btn--disabled 和 .btn--disabled.btn--primary 效果完全一致。但人要读代码，顺序就很重要。
推荐按「功能类型 → 业务状态 → 尺寸/布局变体」排列：
<button class="btn btn--primary btn--loading btn--small"></button>
-
--primary是按钮角色（主操作），优先级最高 -
--loading是当前运行时状态，次之 -
--small是尺寸变体，最末位 - 禁止写成
.btn--primary-loading或.btn--loading-small—— 这是非法嵌套修饰符，BEM 不允许修饰符之间再用--连接
加载中、成功、错误等业务状态必须由 JS 显式控制 class
这类状态不是用户主动触发的交互，而是 API 响应、校验结果或权限判断后的程序决策，必须由 JS 控制增删，不能依赖伪类或 CSS 动画自动切换。
例如：
button.classList.add('btn--loading');
// 请求完成
button.classList.remove('btn--loading').add('btn--success');
- 别用 CSS
@keyframes模拟 loading 状态并自动移除 class —— JS 才知道请求是否真正结束 - 服务端渲染（SSR）时，初始状态必须和服务端输出的 class 严格对齐，否则 hydration 会失败或触发 FOUC
- 如果按钮有多个并发状态（如既
--loading又--error），说明状态机设计有误；BEM 修饰符应互斥，冲突状态需合并为新语义（如--failed-to-load）
BEM 修饰符的真正难点不在命名规则，而在区分「谁该决定状态」：浏览器决定 :hover，DOM 属性决定 disabled，JS 决定 --loading。混用就会导致状态不可控、不可测、不可访问。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
