不应定义 card--print 等打印专用修饰符，因其混淆语义与环境；应复用现有 bem 修饰符，通过 @media print 内精确覆盖样式，并确保规则正确注入与兼容。
打印样式不能靠修饰符自动切换
修饰符（如 button--primary）是静态类名，浏览器不会因为进入打印模式就自动增删它。你写 button--print，HTML 不加这个类，CSS 就永远不生效——@media print 不会“触发”或“注入”任何修饰符。
为什么不要定义 card--print 这类修饰符
这类命名混淆了语义与环境：修饰符应表达组件的**可开关状态或角色**（如 form--compact、table--striped），而不是设备或输出通道。一旦你把 --print 当作修饰符，就会遇到这些问题：
- JS 控制类名逻辑变复杂：得监听
beforeprint事件手动加类，还要防重复、防遗漏 - 语义污染：一个组件在屏幕和打印中本该用同一套状态，却被迫拆成两套类名体系
- 样式复用断裂：比如
.card--highlight在屏幕和打印中都需要强调，但若你只写.card--print .card--highlight，就漏掉了非打印场景下的复用意图
正确做法：用现有修饰符 + @media print 重置
保留原有 BEM 修饰符表达业务含义，在 @media print 块里用更具体的选择器覆盖其视觉表现。例如：
@media print {
/* 状态不变，但渲染退化 */
.table--striped tbody tr:nth-child(odd) {
background-color: #fff !important;
}
/* 字体单位换为 pt，禁用弹性布局 */
.form--compact input {
padding: 4pt !important;
font-size: 11pt !important;
display: block !important;
}
/* 纯展示型元素可直接隐藏 */
.icon--inline {
display: none !important;
}
}
关键点：
- 所有重写都基于已有修饰符，不新增语义无关的
--print - 优先用
!important防止被屏幕样式链覆盖，但仅限打印上下文内使用 - 避免全局重置（如
body { color: #000 !important }），它可能破坏暗色主题逻辑
容易被忽略的注入与兼容性问题
很多现代框架（尤其 CSS-in-JS 或 SSR 场景）默认不将 @media print 规则注入到最终 <style></style> 标签中，哪怕源码写了。务必检查浏览器 DevTools 的 Elements 面板，确认 <style></style> 里真有 @media print 内容，而不是只存在于 JS 模块里。
旧版 Edge 对 position: fixed 元素有重复打印 bug，即使你在 @media print 中设了 position: static，也得加 !important 才保险。
最复杂的点在于：BEM 修饰符本身完全不感知媒体类型，但你的构建、注入、调试流程必须确保——每个修饰符在打印上下文中，都有对应且生效的视觉降级规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
