還記得數個月前，我正經手某專案改版時，跟後端索取了原先該專案 Email 電子報使用的模板。取得之後先是唾棄了當初經手的人使用最原始的 Table 排版，後來做了下功課才發現，原來 Email 對 CSS 的支援度遠低於我的想像！在時程壓力下，只能就當時的架構硬著頭皮邊查 Table 排版的各種細節問題邊將其改為符合新需求的格式。
原先以為與 Email 切版的孽緣就此結束，直到近期的某項專案又接到了 Email 排版的需求，更慘烈的是還需要支援響應式，設計稿分別提供了 PC 和 手機兩個版本。好在先前拜讀了前端大神 Gary 的透過 MJML 快速完成 RWD Email 排版，讓我可以在更短時間內上手這項工具，並將其運用在工作上。
為何要使用 MJML
近年，CSS 分別提出了 Flex, Grid 等更能讓我們簡單達成排版需求的屬性，然而，在主流瀏覽器幾乎都支援這些屬性的情況，Email 的標準卻依然參差不齊，如果在 Can I email 網站中搜尋 Flex 的支援度：
就會發現目前各家 Email 對 Flex 的支援度仍遠低於我們的想像，如果不知道，可能就會發生「這不是幾百年前就有的 CSS？為何我在各個 Email App 打開看到的排版都不同！」的窘境。MJML 提供了一系列語義化標籤，目的旨在減少刻響應式排版時的痛苦，除了大幅提升完成任務的速度外，也可以向恐怖的巢狀 Table 排版說再見。MJML 入門非常簡單，讓我們來看看如何開始。
開始使用
MJML 入門門檻低之外，環境也非常好準備。可以使用官方提供的線上轉譯器、NPM 安裝外，我個人是選擇 VSCode Extension 中可以下載到的 MJML 插件。
首先，在 VSCode 中 Extension 區塊下載它：
我個人在 Mac 環境下有碰到 MJML 1.6.0 無法使用的問題，改裝下方的 1.0.4 即可正常運作。接著，建立一個 helloworld.mjml 檔案，貼上以下 MJML：
<mjml>
<mj-body>
<mj-section>
<mj-column><mj-image width="100px" src="https://fakeimg.pl/200x100/"></mj-image><mj-divider border-color="#F45E43"></mj-divider><mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World</mj-text></mj-column>
</mj-section>
</mj-body>
</mjml>
接著，按下 F1（Mac 沒記錯的話應該是 Command + Shift + p），輸入 MJML，應該可以看到一個 MJML: Open preview to the side，點選確定後：
若在左邊編輯，右邊都會即時呈現輸出編輯後的結果，相較線上轉譯器無法使用本地資源，我覺得在 VSCode 中操作還是方便一點：
接著按下 F1，輸入 MJML，應該可以看到一個 MJML: Export HTML，選擇後輸入檔名，就可以編譯出一個 minify 過的 HTML 檔案，若這時使用 Chrome 或其他瀏覽器開啟，應該會看到和 VSCode 中一樣的排版。如果仔細去看架構，就會發現使用的即為 Email 支援的萬惡 Table，這也是我們最終會使用，或是交給後端讓伺服器寄信時去讀的模板。
如何開始
我自己是直接以官方的範例作為入門，了解官方提供範例的各個標籤大概做了什麼事情就開始的。
若是使用 VSCode 進行切版，使用上需要注意的是，MJML 儘管讓我們使用語義化標籤進行開發，本身還是不等同於 HTML。例如：在 <mjml> 標籤的下一層僅可包含 mj-head 或 mj-body ，每個標籤也分別都會有自己的限制，如果是使用 VSCode，多多留意紅底線的提示可以幫助我們大幅減少踩坑、翻文件的時間。
此外，像是我參與專案的後端使用了 Laravel Blade 作為模板引擎，在與後端確認變數後，就可以直接在 MJML 中寫入像是
<mj-text>
親愛的{{ $name }}你好，
</mj-text>這樣的語法，編譯出來後放入後端的模板引擎便可以直接使用。
MJML 不是神器
MJML 儘管方便，但它終究只是把它的語法編譯成 HTML 語法讓瀏覽器看得懂，依然會被 Email 對 CSS 屬性支援不足所限制，例如可以看看這位網友在 MJML 專案的 issues 中提出的問題，節錄 MJML 團隊的回覆：
Unfortunately, we can’t do anything, as explained here it means the version of Gmail associated to this account doesn’t support responsive styles.
在使用 CSS 屬性時也千萬別忘了同時在 Can I email 網站中查詢這個屬性的支援度，才不會和我一樣，後來真的切出了一個三家 Email App 呈現都不同的版面 XD。
關於 MJML 的介紹就到這邊，希望能幫助到受 Email 排版所苦的朋友們，如果這篇文有任何錯誤，也請不吝提出，謝謝~~
References:
