HTMLのソースコードの形状ルール

今回のこの記事に対しての反響について

日頃から他の実装者が制作したWebサイトのソースコードを見るようにしていますが、美しいソースコードだと思えるソースコードにはなかなか出会えません。
「美しいソースコード」という意味には、単に「美しい」だけではなく「見やすい」という意味も含めて使用しています。
タイトなスケジュールに追われて、ソースコードを整える余裕がないというのが現状でしょうか。
中でも最も気になるのが、インデントです。
Webサイトのソースコードを見ると8割程度の割合で、インデントが付いています。
なぜインデントを付けるのかを聞くと「コーディングミスが防ぎやすい」「作業効率が良くなる」という回答がきます。
これについて否定はしませんが、ではインデントを付けないとコーディングミスが起きやすく、作業効率が悪いのかというと、そんなことはありません。

私は、インデントを付けません。

理由は、ソースコードの形状が美しくないからです。
また、BEM設計で実装することで、インデントを付けなくても十分に見やすいソースコードにすることができます。

次の画像は、あるWebサイトのソースコードをキャプチャした画像です。
コーディング作業云々を考えず、ソースコードの形状だけを見てください。

上のソースコードは、美しいと言えるでしょうか。
そもそもソースコードが美しいか美しくないか（綺麗かどうか）を考えたことがないマークアップエンジニアの方がいれば、それは考え方を改めたほうが良いでしょう。
ソースコードを書くことがあなたの仕事です。
その成果物に対し「美しいか」「綺麗か」「整頓されているか」「見やすいか」を追求する必要があります。
もし、上のソースコードを見て、美しいと思うのであれば、それは否定しません。
ただ、私は美しくないと考えます。
間違いなく、より美しくできます。

インデントルール

上で述べた通り、私はインデントを付けません。これが、ルールです。

インデントルール: インデントは付けない。

理由は、ソースコードの形状がガタガタになってしまい、美しくなくなってしまうからです。
後ほど、私がコーディングしたソースコードをお見せしますが、インデントを付けず、全てのコードが左寄せに揃っているソースコードをインデントを、付けているソースコードと比較し、美しいと感じてもらえるはずです。

改行ルール

どこで改行するか、そんなことコーディング作業中に意識したことなんてない、というマークアップエンジニア、意外と多いかもしれません。

次の画像は、あるWebサイトのソースコードをキャプチャした画像です。
インデントは付いていませんので、左揃えになっています。

こちらのソースコードもあまり美しいとは思えません。
理由は、改行位置が統一されていないからです。
改行が連続され、6行程度の空きができてしまっていたり、li要素の前に2つの改行が入り、1行の空きができている場合と、改行が無い場合があったりと、統一されていません。

どんな時に改行するか、ルールを決めて統一しましょう。

私は次のようなルールを設けています。

改行ルール 1: 要素がブロック（CSS）の場合は、改行する。

次のようなコードを見てみます。

<div><p><a href="#">テキストテキストテキストテキスト</a></p></div>

上のコードを見ると、div要素とp要素がブロック、a要素はインラインですので、ルールを適用すると、次のようになります。

<div>
<p><a href="#">テキストテキストテキストテキスト</a></p>
</div>

改行ルール 2: 要素がBlock（BEM設計）の場合は、前後に1行空ける。

別の機会に吉本式BEM設計（BEM設計ベース）については詳しく解説しますが、吉本式BEM設計（BEM設計ベース）は基本的にBEM設計を基にしています。BEM設計でBlockとなるアウトライン要素の前後には、1行空けるルールを設けています。

<section class="block">
<h2 class="block-tit">タイトル</h2>
<p class="block-txt">テキストテキストテキストテキスト</p>
</section>

<section class="block">
<h2 class="block-tit">タイトル</h2>
<p class="block-txt">テキストテキストテキストテキスト</p>
</section>

<section class="block">
<h2 class="block-tit">タイトル</h2>
<p class="block-txt">テキストテキストテキストテキスト</p>
</section>

改行ルールについては、上の2つです。
吉本式BEM設計（BEM設計ベース）では、次のようなソースコードは出てきません。

1. インラインとなっている要素（aタグ、imgタグ、spanタグなど）の前後に改行が入る。
2. 複数行の空きがある。（出てくる空きは必ず1行のみです。）

インデントをやめ、この改行ルールを適用するだけでも、ソースコードの形状は大幅に美しくなります。

コメントルール

ソースコードの形状ルールの最後は、コメントのルールです。
中にはコメントを入れないという方もいると思いますが、私は、コメントを入れることで構造を見やすく、そしてわかりやすくさせています。

コメントルール 1: 要素がBlock（BEM設計）の場合は、前後にコメントを入れる。

挿入するコメントのコードは次のようにしています。

開始コメント <!-- block名 -->
終了コメント <!-- /block名 -->

コメントルール 2: 要素の閉じタグに付ける終了コメントは改行しない。

上の2つのルールを適用すると、次のようになります。

<!-- sec -->
<section class="sec">
<h2 class="sec-tit">タイトル</h2>
<p class="sec-txt">テキストテキストテキストテキスト</p>
</section><!-- /sec -->

<!-- sec -->
<section class="sec">
<h2 class="sec-tit">タイトル</h2>
<p class="sec-txt">テキストテキストテキストテキスト</p>
</section><!-- /sec -->

<!-- sec -->
<section class="sec">
<h2 class="sec-tit">タイトル</h2>
<p class="sec-txt">テキストテキストテキストテキスト</p>
</section><!-- /sec -->

Blockの要素の前後にコメントを挿入することで、Blockの区切りがよく明確になります。
また、改行ルールも適用され、Blockの要素の前後には、必ず1行空きができます。
言い方を変えると、1行の空きができる箇所は、Blockの要素の前後以外出てきません。
結果、1行の空きに囲まれた要素は、1つのBlockであるということになります。

これらを実践している私のソースコードが次になります。

いかがでしょうか。
前に出てきた2つのソースコードの例と比較して、私のソースコードの方が、統一感があり、形状も美しいと感じられると思います。

吉本式BEM設計（BEM設計ベース）は、ソースコードの形状だけではありません。
より美しいソースコード・ファイル設計にするためには、まだまだ細かいルールがあります。
引き続きまとめていきますので、もし興味があれば、読んでみてください。