不该。bem修饰符应描述状态而非触发条件，如card--elevated表达悬停后的视觉变化，而非hover本身；需配合js事件与css变量实现多态响应、主题适配及可访问性支持。
卡片悬停类名该不该加 hover 后缀？
不该。BEM 的修饰符（Modifier）表达的是组件的「状态」或「变体」，不是触发条件。card--hovered 听起来像“这个卡片已经被悬停过了”，但实际它只用于当前鼠标正悬停时的样式；而 card--interactive 又太泛，无法精准对应视觉反馈。正确做法是用语义化状态名，比如 card--elevated 或 card--focused —— 它们描述的是「悬浮后发生了什么」，而不是「怎么触发的」。
常见错误：card__image:hover 直接写伪类，导致无法用 JS 控制、不兼容键盘焦点（:focus-within）、测试难模拟。BEM 要求交互态也走 class 切换，才便于自动化和可访问性支持。
- 用
card--elevated表示阴影加深 + z-index 提升 - 用
card--highlighted表示边框变色 + 图标显隐 - 避免
card--hover、card--onhover这类冗余修饰符
如何让 card--elevated 同时响应鼠标悬停和键盘焦点？
靠 CSS 的组合选择器 + JS 的事件委托，而不是写两套 class。核心是：让修饰符 class 本身不绑定触发方式，只负责样式；触发逻辑交给外部控制。
实操建议：
- CSS 中定义
.card--elevated的全部样式（含 transition），不依赖:hover - HTML 结构保留
tabindex="0"，确保卡片可聚焦：<article class="card" tabindex="0"></article> - JS 监听
mouseenter/mouseleave和focus/blur，统一增删card--elevated - 为避免鼠标与键盘状态冲突（比如鼠标移开但焦点还在），用
document.hasFocus()配合matches(':hover')做状态仲裁（现代浏览器支持）
示例片段：
card.addEventListener('mouseenter', () => card.classList.add('card--elevated'));
card.addEventListener('focus', () => card.classList.add('card--elevated'));
card.addEventListener('mouseleave', () => {
if (!card.matches(':focus')) card.classList.remove('card--elevated');
});
card.addEventListener('blur', () => card.classList.remove('card--elevated'));
card__content 在悬停时要不要加修饰符？
要，但必须按 BEM 嵌套规则来 —— 修饰符属于其直属块元素，不能跨级。也就是说，card__content--expanded 是错的，因为 card__content 本身不是独立块；正确做法是让父级 card 承载状态，子元素用属性选择器或后代选择器响应：
- ✅ 推荐：
.card--elevated .card__content控制内边距/透明度变化 - ❌ 避免：
.card__content--elevated（违反 BEM 块归属原则） - ⚠️ 注意：如果
card__content内部有独立交互（如折叠面板），它自己可以是块（collapsible-panel），此时再用修饰符才合理
性能提示：大量卡片同时悬停时，用 transform: translateY(-2px) 替代 top 或 margin-top，避免重排；阴影用 box-shadow 而非 filter: drop-shadow()（后者触发全层绘制）。
为什么 card--elevated 在暗色模式下看起来不对？
因为 BEM 修饰符默认不感知主题上下文。直接在 card--elevated 里写死 box-shadow: 0 4px 12px rgba(0,0,0,0.15)，在深色背景上会显得发灰、浮力不足。
解决思路不是新增 card--elevated-dark，而是利用 CSS 自定义属性解耦：
- 在
:root或主题 wrapper 上定义--card-elevation-shadow -
.card--elevated只用这个变量：box-shadow: var(--card-elevation-shadow) - 暗色模式切换时，只需改变量值，无需改 class 名或重写选择器
这样既保持 BEM 的 class 稳定性，又支持动态主题。容易被忽略的是：过渡动画要同时作用于 box-shadow 和 transform，否则暗色模式切换时 elevation 效果会跳变。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
