BracketsのEmmetでミニファイする前にBeautifyしよう

この記事はBracketsでEmmetを使ってミニファイ（Merge Lines）する時の注意事項の覚書です。
結論を先に書くと、このMerge Linesをする前にBeautifyなどでコードを整えてからやったほうが良いかもという話。

HTMLメルマガのコーディング案件

少し前にHTMLメルマガのコーディングの案件をやらせてもらった時のこと。
そのメルマガは、年に1〜2回程度配信するもので、基本的なデザインは前回のものをそのまま利用して必要箇所だけ更新するような形式。
そのため、今回更新する箇所だけ編集してもらえれば良いという依頼でした。

メルマガなのでtableレイアウト

HTMLメルマガはCSSでレイアウトせずにtableレイアウトという20年くらい前のようなコーディング手法で作られるのが一般的です。
tableレイアウトというのはtableの中にtableを入れ子にして書いていくので、コードがものすごく長くなるものです。
CSSは簡単なものだけ使えますが、HTMLのそれぞれのタグにstyle属性でいちいち書いていくので、これによってさらにコードが長くなってしまいます。

ベースとして支給された前回のメルマガ（HTMLファイル）を見てみると、これまで複数の担当者が引き継いできた歴史を感じさせるようなファイルで、人によって書き方がバラバラ・・・だったりもしていましたが、とりあえず自分に依頼された箇所だけコーディングして提出。
その後、メルマガとして配信するためにファイルをもっと軽くしたいという要望が出たのでミニファイすることになりました。（※ミニファイとは、改行やインデントを全部詰めて一行のコードにすること）
もともとページが長い上に、tableの入れ子で長大なコードなので、ミニファイするとかなり軽くなります。

予期せぬ表示崩れが発生

Bracketsに拡張機能のEmmetを入れていれば、Shift + Command + Mですぐにミニファイ（Merge Lines）出来るので便利。
速攻で完了したと思ったのも束の間、どうもブラウザ表示がおかしいぞ・・・

ミニファイ前は崩れてないのに、ミニファイ後は崩れている模様。
そして崩れているのは、今回自分が依頼されてコーディングした箇所ではなく、以前に他の人がコーディングした箇所。
ミニファイ後のコードを確認してみると、HTMLタグと属性の間の半角スペースが詰まってしまっている箇所が何箇所かあるのが表示崩れの原因になっているようでした。

原因となっていた箇所のHTMLコード

ミニファイ前後を見比べてみると、半角スペースがなくなってしまっている箇所はもともと半角スペースではなく改行が入っている箇所だということが判明。
具体的には、支給されたHTMLの中で以前の担当者の人が以下のような書き方をしていた箇所でした。
※普通のWebページなら非推奨の属性まで書いてるのは、HTMLメールだからです。

例えば、こういう書き方↓

<th
    style="font-size: 16px;color: #333333"
    width="200"
    bgcolor="#cccccc">てきすとてきすと</th>

つまり、おそらく（？）一般的には、上のような書き方ではなく、下のように属性と属性の間に半角スペースを入れて書く人のほうが多いのではないかと思います。

<th style="font-size: 16px;color: #333333" width="200" bgcolor="#cccccc">てきすとてきすと</th>

半角スペースではなく改行で区切るような書き方がされているところをBracketsでミニファイすると、下のように、間に半角スペースは入らずに詰まった形になってしまうのです。

<thstyle="font-size: 16px;color: #333333"width="200"bgcolor="#cccccc">てきすとてきすと</th>

解決策

自分がコーディングしたHTMLならこういう書き方はしないので問題ないのですが、他の人が書いた長大なコードをミニファイするなら、同じくBracketsの拡張機能のBeautifyなどを適用させてからミニファイするのが良いでしょう。
Beautifyはコード整形のための拡張機能で、これを適用すればこのような書き方のコードもきちんと間に半角スペースを入れた形に整形してくれるので、その上でミニファイすれば安心です。