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