不能靠手动写style属性，因其在大规模邮件系统中会导致漏样式、不一致、改不动三大硬伤；csstoinlinestyles需预编译css、显式传入字符串，且不处理@import、css变量和媒体查询，对比juice存在!important保留、响应式支持等关键差异。
为什么不能靠手动写 style 属性？
手动给每个 <p></p>、<td>、<code><h1></h1> 加 style 属性，在单封模板里可行；但一旦进入大规模邮件系统（比如每天发 10 万封、模板动态生成、A/B 测试分支多），就会立刻暴露出三个硬伤：漏样式、不一致、改不动。尤其当 CSS 来自前端团队维护的 SCSS 文件，或通过 CMS 注入时，人工同步内联样式等于主动放弃可维护性。
CssToInlineStyles 的核心限制与绕过方式
它能读取 <style></style> 块和 <link rel="stylesheet">，但默认不处理 @import、不解析 CSS 变量（var(--color-primary)）、也不展开嵌套规则（如 .btn:hover）。实际用时必须提前做两件事：
- 把所有样式预编译成纯 CSS 字符串（Sass/SCSS 输出为 .css，删掉
@import和变量） - 显式传入 HTML 字符串和 CSS 字符串，不能依赖文件路径自动加载 ——
CssToInlineStyles::process($html, $css)才生效，直接传文件路径会静默失败 - 若 HTML 中有重复 class（比如多个
<td class="header">），它只按第一个匹配规则应用，后续同名 class 不会叠加，这点和浏览器渲染不同 <h3>和 <code>juice对比时最容易踩的坑两者都做内联，但行为差异直接影响上线稳定性：
-
juice.inlineContent()默认保留!important，而CssToInlineStyles会丢弃 —— 如果你依赖color: #000 !important覆盖 Outlook 的默认链接色，就得在原始 CSS 里去掉!important，或用CssToInlineStyles::setPreserveImportant(true) -
juice不处理@media，但CssToInlineStyles会直接忽略整个媒体查询块 —— 想支持响应式，必须提前用 PostCSS 拆成桌面/移动端两套 CSS，分别调用两次 -
juice对<table> 的 <code>cellpadding/cellspacing属性无感，而CssToInlineStyles会把它们转成style="border-collapse: collapse;"等等 —— 但不会补全缺失的border-collapse，得自己在原始 CSS 里写死大规模系统里必须加的兜底校验
自动化流程跑通不等于邮件能正常显示。真实环境中至少要加三道检查：
- 扫描输出 HTML 是否还残留
<style></style>或<link>标签 ——grep -n "<style output.html> 是最廉价的守门员</style> - 验证所有
<table> 是否都有 <code>cellspacing="0"和cellpadding="0"—— Outlook 2016 会把缺这两个属性的 table 渲染出诡异边距 - 抽样检查关键元素（如 CTA 按钮）是否真被加上了
style属性 —— 有些 selector 写成button.primary，但 HTML 里是<td class="primary"><button>，结果按钮没样式 <p>内联不是终点，而是让样式“活下来”的起点；真正难的是让同一份 HTML，在 Gmail App、Outlook Windows、Apple Mail 这三类渲染引擎上，连字号大小、行高、甚至 <code>vertical-align都保持一致 —— 这部分没法靠工具自动解决，只能靠测试矩阵和像素级比对。
- 扫描输出 HTML 是否还残留
-
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
