.button__text-hover不是伪类写法，因为伪类必须以冒号开头（如:hover），而-hover只是普通class后缀，既不符合css原生语法，也违背bem中双下划线表element、破折号表modifier的命名规范。
:hover 不能直接写在 BEM 的 Element 后面当“伪类后缀”用——比如 .button__text:hover 是合法的，但 .button__text-hover 这种命名 **不是伪类，是普通 class**，完全违背 BEM 原则和 CSS 机制。
为什么 .button__text-hover 不是伪类写法
BEM 中的双下划线 __ 只用于连接 Block 和 Element，破折号 - 仅用于修饰符（Modifier），而伪类如 :hover、:focus、:disabled 是 CSS 原生语法，必须用冒号开头，不能“扁平化”成 class 名的一部分。
把 :hover 拆成 -hover 后缀，会导致：
- 语义断裂：读不出这是状态，只当它是另一个静态 Element 或 Modifier
- 行为失效：浏览器根本不识别
.button__text-hover作为悬停响应，必须靠 JS 手动增删 class 才能模拟，失去原生伪类的零成本交互和可访问性支持 - 维护错位：样式逻辑分散到 CSS 和 JS 两处，违反关注点分离
.button__text:hover 就是标准且推荐的写法
BEM 不禁止在 Element 选择器后链式追加伪类——这恰恰是清晰表达“该 Element 在 hover 状态下的样式”的最直白方式。
示例：
.button {
&__text {
color: #333;
transition: color 0.2s;
&:hover {
color: #007bff;
}
}
}
编译后就是 .button__text:hover，完全符合 BEM + 原生伪类协作规范。关键点：
- 伪类始终附加在最终 Element 选择器之后，不破坏 Block/Element 层级结构
- 用嵌套语法（如 SCSS）写更安全，避免手误写成
.button__text :hover（带空格就变成后代选择器） - 多个状态可并列：
&:hover、&:focus、&:active都可放在同一嵌套块内
Modifier 修饰符才是用来表达“持久状态”的地方
如果某个状态需要被 JS 控制、需保留在 DOM 上（比如“当前选中”“加载中”），那就该用 Modifier，而不是伪类：
- ✅ 正确：
.button__icon--loading（JS 添加 class，CSS 定义旋转动画） - ❌ 错误：
.button__icon-loading（没双横线，BEM 结构无效；也不是伪类，无法触发） - ⚠️ 注意：
.button__icon:hover和.button__icon--loading解决的是不同问题：前者是瞬时交互反馈，后者是确定性 UI 状态
真正容易被忽略的是：伪类选择器本身不具备“命名空间隔离”能力——.button__text:hover 如果和其他库或全局样式冲突（比如某 reset.css 给所有 a:hover 加了下划线），仍可能被意外覆盖。所以实际项目中，别只依赖 BEM 命名，该加 !important 的地方要克制但明确，该用 data- 属性做精细控制时也别硬扛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
