BEM修饰符与伪类选择器可共存，但须遵循“修饰符控状态、伪类触变化”原则；.btn--disabled:hover存在逻辑冲突，应隔离禁用态样式；transition应写在基础类中，伪元素过渡需在其自身规则定义。
直接说结论：BEM修饰符与伪类选择器（如 :hover、:focus）在CSS3过渡中可以共存，但必须严格遵循「修饰符控制状态，伪类触发变化」的职责分离原则；否则容易出现过渡失效、样式覆盖混乱或动画卡顿。
为什么 :hover 和 --disabled 不能混写成 .btn--disabled:hover
这不是语法错误，而是逻辑冲突：一个表示“不可交互的终态”，一个表示“正在悬停的瞬时交互”，浏览器渲染层会优先应用后声明的规则，且 transition 很可能因属性被重置而中断。常见现象是按钮在禁用状态下仍响应 hover 动画，或 hover 效果突然跳变。
-
--disabled修饰符应直接禁用所有可过渡属性（如设opacity: 0.5、pointer-events: none、移除transition） -
:hover规则只存在于非禁用类下，例如.btn:not(.btn--disabled):hover或更推荐的显式隔离：.btn--primary:hover单独定义 - 若需禁用时也有视觉反馈（如 tooltip 提示），应改用 JS 控制
title或额外元素，而非依赖伪类
transition 应该写在基础类还是修饰符里？
写在基础类（如 .btn）最稳妥。修饰符只负责变更具体值，不重复声明 transition —— 否则多个修饰符叠加时，transition 可能被覆盖或叠加出意外延迟。
- 正确：
.btn { transition: background-color 0.2s ease, transform 0.2s ease; }，然后.btn--large:hover { transform: scale(1.05); } - 错误：
.btn--large { transition: transform 0.3s cubic-bezier(...); }—— 会覆盖基础类中的transition，导致background-color失去过渡 - 例外：当某个修饰符需要完全不同的动效节奏（如加载态
.btn--loading需要旋转动画），应使用@keyframes+animation，而非transition
伪元素（::before/::after）如何配合 BEM 修饰符做过渡
伪元素本身不支持添加 class，所以不能直接写 .btn--success::before 然后在 hover 里改它——必须把修饰符的影响提前“编译”进基础伪元素规则中，再靠父级类控制显隐或位移。
立即学习“前端免费学习笔记（深入）”；
- 结构上保持
.btn__icon::before统一定义，用content+background-image或transform实现图形 - 修饰符通过父级类切换伪元素的
opacity、transform或width/height，例如：.btn--success .btn__icon::before { background-position: -20px 0; } - 过渡必须写在伪元素自身规则里（
.btn__icon::before { transition: background-position 0.2s; }），不能指望父类 hover 带动它自动过渡 - 注意：
content属性不可过渡，所以图标切换不要依赖content: url()的变更，改用background-image或 SVG 内联 +mask
BEM 修饰符本质是静态状态标记，伪类是动态事件钩子；把二者强行耦合进同一个选择器，等于让 CSS 承担本该由 JS 管理的状态协调工作。真正优雅的做法，是让修饰符决定“能做什么动画”，让伪类决定“什么时候播”，中间只靠基础类里那一行干净的 transition 连接。
