HTMLとCSS関する推奨ルール

ウェブ開発において、HTMLとCSSは最も基本的な要素であり、効率的で読みやすいコードを書くことが重要です。
本記事では、HTMLとCSSのコーディングにおける推奨ルールを紹介します。

HTML に関する推奨ルール

インデントの幅

インデントにはスペースまたはタブを使用しますが、選択はチームやプロジェクトの規約に従います。
一般的には、スペースの場合は2スペースまたは4スペースが推奨されます。

ネスト（入れ子）構造

HTMLでは、子要素は親要素より1段階インデントを進めることが一般的です。

例：

 
開始タグと終了タグを必ずペアで記述し、閉じ忘れを防ぎましょう。

属性の引用符

属性値はダブルクオートで囲むことが推奨されます。

例：

大文字小文字の一貫性

HTMLタグや属性名は小文字で記述するのが推奨されます。

例：

コメントの活用

必要に応じてコメントを追加し、コードの意図や重要な部分を説明します。

例：

 
ただし、過度に細かいコメントを追加しすぎるとコードが読みにくくなる場合があるため、必要最低限に抑えるのが良いでしょう。

CSS に関する推奨ルール

セレクタの一貫性

CSSのセレクタ名は、プロジェクトの命名規則に従って統一します。

例：

プロパティの順序

プロパティは一定の順序に従って記述し、可読性を向上させます。
一般的な順序: レイアウト関連のプロパティ（display, position, width, height）を先に記述し、色やフォント関連を後に記述します。

例：

コメントの活用

コメントを活用してコードの意図や特定のセクションの目的を説明します。

例：

一貫したフォーマット

ルールセット内で以下のフォーマットを守り、可読性を高めます。
・プロパティと値の間にはコロン（:）を使用し、後にスペースを入れる。
・各プロパティは新しい行に記述する（開発環境の場合、可読性を向上させます。本番環境（例: xx-min.css）ではパフォーマンスを重視し、すべてのプロパティを1行にまとめる場合があります）。

例：

シンプルで直感的な名前

クラス名やID名は、直感的で意味が明確な名前を付けるよう心がけます。
予測可能でわかりやすい名前を使用することで、コードの保守性が向上します。

例：

 
これらのルールを守ることで、HTMLとCSSのコードはより整然とし、保守性が高まり、チーム内での協力もスムーズになります。