@media print 不能直接调整 bem 修饰符，因其仅控制样式生效条件；修饰符是静态类名，需在 @media print 块中显式重写对应样式，且类名不可含 @ 符号。
@media print 不能直接“调整 BEM 修饰符”，它只能控制样式生效条件。BEM 修饰符（如 button--primary）是静态类名，不会因媒体类型自动切换；真正起作用的是你把哪些修饰符对应的样式放进 @media print 块里。
为什么不能靠修饰符名带 @print 自动适配
BEM 规范里不支持、浏览器也不识别 button--primary@print 这类写法。CSS 类名中出现 @ 会被解析为非法字符，导致选择器失效。更关键的是：打印样式不是“换一个修饰符”，而是“重写整套渲染逻辑”——字体单位要改（pt 而非 px），布局要退化（禁用 flex/grid），浮动和定位必须清零。这些不是修饰符能承载的量级。
常见错误是试图抽象出 card--print-layout 这种类，结果发现它只在打印时有用，却污染了组件的语义边界，还让 JS 控制类名的逻辑变得脆弱。
正确做法：用修饰符配合 @media print 分层控制
把 BEM 修饰符当作“状态开关”，而 @media print 是“环境上下文”。两者正交使用，不混写，不耦合：
- 保留原有修饰符用于表达业务状态，比如
table--striped、form--compact - 在
@media print块内，用更高优先级的选择器重置这些修饰符的视觉表现，例如：@media print { .table--striped tbody tr:nth-child(odd) { background-color: #fff !important; } .form--compact input { padding: 4pt !important; font-size: 11pt !important; } } - 对纯展示型修饰符（如
icon--inline），可直接在@media print中设display: none，无需新增类
容易被忽略的兼容性陷阱
某些框架或 CSS-in-JS 库默认不注入 @media print 规则，尤其当样式是运行时动态生成时。检查最终渲染的 <style></style> 标签里是否真有 @media print 内容，而不是只在源码里写了。
另外，!important 在打印上下文中权重更高，但滥用会导致屏幕样式也被意外覆盖。建议：
- 优先用更具体的选择器，比如
.print-ready .card--highlight而非泛泛的.card--highlight - 避免在
@media print里写body { color: #000 !important; }这类全局强重置，它可能干扰已有的深色主题逻辑 - 旧版 Edge 会重复打印
position: fixed元素，哪怕你已在@media print里写了position: static，也得加!important才保险
最复杂的点在于：BEM 修饰符本身不感知媒体类型，但你的样式系统必须确保所有修饰符在 @media print 下都有明确、可预测的 fallback 行为——这需要设计阶段就约定好“哪些修饰符允许出现在打印场景”，而不是等调试时才发现 badge--pulse 在纸上疯狂闪烁（其实不会，但它的动画样式可能残留影响布局）。
