2016.09.27

インデントと改行のススメ

ソースでインデント(左のスキマ↓)や改行をちゃんと入れることって、かなり大事。

20160927_img1

めんどくさいし、始めのうちはあまり必要性を感じないけど、
インデントがあることによって読みやすくなり、HTMLを見ながらCSSを書くのが非常にやりやすくなる。
さらに、インデントなしの場合は可読性が落ちるため、後々の修正とかも大変。

HTMLのみのソースであれば、要素の階層ごとにインデントを増やしていけばいいため簡単だが、
HTMLの中にPHPがある場合は、どこにインデント・改行を入れるかが1番気を遣うところかもしれない。
変なところに入れてしまうと逆に読みずらくなったり、後で見直したときに違和感を感じてしまったりする。

例えば、PHPの変数にサムネイル画像が登録されている場合、
その画像を表示し、なければ「noimage.jpg」を出すというような記述をする場合。

<div class="thumbnail"><?php 
	if($image){ echo '<img src="img/'.$image.'" />'; }
	else{ echo '<img src="img/noimage.jpg" />'; }
?></div>

<div class="thumbnail">
<?php 
	if($image)
	{
		echo '<img src="img/'.$image.'" />';
	}
	else
	{
		echo '<img src="img/noimage.jpg" />';
	}
?>
</div>

1つ目のように、改行を必要最小限にしてコンパクトにするか、
もしくは2つ目のように条件と”ココからPHP”だということを強調するか、かなり大きく分けるとこの2つ。

自分の場合、Wordpressのサムネイルを表示するときは、大抵1つ目の記述をしている(記述方法か決まっているため)。
それ以外は、「{ }」で改行をさせるような感じ。

この2パターンに関しては個人の好みによるものが大きいため、一概にどちらがいいかとは言えない。
とりあえずは自分で分かりやすければいいのかなと。