前提

開発環境

確かにプレビュー上では綺麗にスタイルが組まれていたものが、いざメールを送信してみるとスタイルが崩れてしまっていることに悩まされました。

一番ネックなのが、メールクライアント毎にCSSの挙動が異なるということです。

詳細は下記にまとまっているようですが、各メーラーによって対応していないStyleがあります。
The Ultimate Guide to CSS
例えば、

など、キリがなくてうんざりします。

ちょっとググったら出てくる情報だと思いますが改めて、下記に注意する必要があります。

当然なんですが、メールは外部からリソースを読み込みますので、絶対pathで記載しないと表示されません。

「何年前のコーディングの仕方だろう…」と嘆きながら組みました。
テーブルレイアウトなら、CSSが効かなかったとしても大きくスタイルが崩れることはなさそうです。
テーブルレイアウトの組み方はここが参考になります。

例えば、<a> タグの中に <table> とか入れちゃうと、Gmailで見たときにリンクが効かなくなります。

これが

<a href="hoge">
  <table>
    <tr>
      <td>ほげ</td>
    </tr>
  </table>
</a>

Gmailだとこうなってしまいました

<a href="hoge"></a>
<table>
  <tr>
    <td>ほげ</td>
  </tr>
</table>

先に上げた roadie-rails を使うと、外部ソースとして書いたCSSをインラインに変換してくれるので便利です。

当たり前っちゃ当たり前（普通にWebサイト作ってても各ブラウザで確認しますよね）ですが、
各メールクライアントによって挙動が違うので、対象とするクライアントを決めた上で、各クライアントで表示が崩れないか確認するしかないでしょう。

明日の『LITALICO Advent Calendar 2016』は @takish さんの記事です。お楽しみに！