不能将 card--print 等类名作 BEM 修饰符使用，因其违背修饰符仅表达可开关状态或角色的原则；正确做法是在 @media print 中重写现有修饰符样式，禁用弹性布局、改用 pt 单位、清零定位，并确保打印样式被正确注入与生效。
不能把 card--print 这类类名当修饰符用，BEM 修饰符不感知媒体类型，打印适配靠的是在 @media print 块里重写已有修饰符的样式，而不是新增语义无关的“打印专用”修饰符。
为什么不能定义 button--print 这类修饰符
修饰符表达的是组件的**可开关状态或角色**（比如 form--compact、table--striped），不是输出通道。一旦你加了 --print，就会带来三个实际问题：
- JS 控制逻辑变脆弱：得监听
beforeprint手动增删类，漏一次就失效 - 语义污染：同一个按钮在屏幕和打印中本该共享
button--disabled状态，却被迫拆成两套类名体系 - 样式复用断裂：比如
.card--highlight在打印时仍需强调，但若只写.card--print .card--highlight，就漏掉了非打印场景下的复用意图
如何在 @media print 中正确重写修饰符样式
保留原有 BEM 类名结构，在 @media print 块内用更具体的选择器覆盖其视觉表现。重点不是“换类”，而是“退化渲染”：
- 字体单位必须改用
pt（如font-size: 11pt），禁用rem/em—— 它们在打印上下文中解析不稳定 - 禁用弹性布局：
display: block !important替代flex或grid - 清零浮动与定位：
position: static !important，旧版 Edge 必须加!important才能防止重复打印fixed元素 - 纯展示型修饰符（如
icon--inline）可直接设display: none !important，无需新增类
容易被忽略的注入与兼容性陷阱
很多现代框架（尤其 CSS-in-JS 或 SSR 场景）默认不将 @media print 规则注入到最终 标签中，哪怕源码写了。务必检查浏览器 DevTools 的 Elements 面板，确认 里真有 @media print 内容，而不是只存在于 JS 模块里。
另外，!important 在打印上下文中权重更高，但滥用会导致屏幕样式也被意外覆盖。建议：
- 优先用更具体的选择器，比如
.print-ready .table--striped tbody tr，而非泛泛的.table--striped - 避免全局重置（如
body { color: #000 !important }），它可能破坏已有的深色主题逻辑
最复杂的点在于：BEM 修饰符本身完全不感知媒体类型，但你的构建流程、样式注入机制、调试手段，必须确保所有修饰符对应的打印样式真的被加载、生效、且不被其他层覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
