Webコーディングスタイルのベストプラクティスを学んだ

コーディングスタイルは、次のような理由から決定しておいてからコーディングをスタートしたほうが良いとされています。

これぞ決定版かと思われましたため、メモさせていただきます。

Contents

コーディングスタイル（優先順高）

多くのフロントエンドエンジニアが取り入れているとされる、コーディングスタイル。

<div>, <p>, <article> ….. etc.

ただし<!DOCTYPE html> だけは大文字。

いくつかのタグは省略できるが、常に閉じタグを記述。

<p> ほげほげほげほげほげ</p>

<ul>

<li>hogehogehogehogehoge</li>　　←省略できても閉じる

<li>ホゲホゲホゲホゲ</li >    ←省略できても閉じる

</ul>

常にダブルクォーテーションで囲い、一貫性を保持。

<img  src="log.png"  width=200  height=100>  ←　ダブルクオーテーションなくても間違いではないが

<img  src="log.png"  width="200"  height="100"> ←　一貫性保持のためすべて囲む

Boolean 属性は属性が存在すればtrue, 存在しなければfalseの2値を取る属性。

そのため値はあってもなくても構わないもの、一貫して値を省略することによって boolean 属性であることが明確になり可読性が向上。

<input type="text" required>

widthとheightが省略されたimg要素は、画像の読み込みが完了するまで自身のサイズを確定できません。サイズを明示するとレンダリングコストを抑制。CSS で指定しても可。

<img  src="log.png" >
<img  src="log.png"  width="200"  height="100"> ←　画像読み込み前に画像サイズ確定できる

一部の古いブラウザは空指定であっても http リクエストを発行してしまうため。

<img  src="" >　←空指定。空でもリクエストが発生してしまう。

<img  src="log.png" >

head内での記述が一般的だが、少なくとも対象タグより前に記述。

スタイルシートを対象より後に記述してしまうと、要素のレンダリング後にスタイリングが開始されるため、余分なレンダリングコストがかかるため。

<p>ほげほげほげ</p>

<style>　p{　color:red;　}　</style>　←　対象の後に記載のため余分なレンダリング発生

スクリプトの実行中は、レンダリングが止まるため通常はできるだけ後に記述。

<body>

<script></script> ← </body>より後に記述すべき

</body>

これらは開発者の好みにより意見が分かれるスタイル。