HTMLを書く上でのクラス名指定や、ネストの深さのルールがわからない


HTMLとCSSを使ってサイトのコーディングの練習をしているのですが、クラス名の指定のルール、ネストの深さのルールをどう決めたらいいかわからないので質問させていただきました。

何かどのエンジニアさんも共通のルールを持っているか様々なコードを見ましたが、共通項が見出せませんでした。

ルールを決められなければサイトのコーディングに余計な時間がかかってしまうので困っています。




クラス名の考え方ですが、はっきり言って開発者と後任のメンテナンスを行う人間が理解できるか否かが最も重要です。  
たまにやたら短い名称とかありますが、省略文字などで行うと1か月後の自分が見返しても理解できないことがあります。

以下はhtml系ではなく、一般的にC言語やpythonなどと呼ばれるような言語系で”関数名”や”変数名”を決定する際にこのようなワードを接続して表現することで表現の一致を目指したらどうか？  
という例文です。  
この単語がわかりやすいなど選り好みが異なるとは思いますので参考程度になれば幸いです。  
<https://qiita.com/KeithYokoma/items/2193cf79ba76563e3db6>

自分が見てきた中でクラス名で最も長かったのは6単語接続の英語で20文字弱くらいだったかなと思います。  
何はともあれ後から見返して何を示すクラス名ID名か理解できる名前を付けることを心掛けたほうが良いかなと思います。

ネストの深さに関しては実質無限と言えますが、まず表現したいサイトの理想の見た目について、絵として書き出してみてください。PowerPointなどでレイアウトしてもいいです。

その時、最小の四角範囲（ボタンだったりコラムブロック）に対しては大体1～3ネストくらい存在します。  
その最小ブロックを括るのに1ネスト、さらに上位のブロックに括って1ネスト・・・。  
となるのでサイトの中で表現したい要素が複雑になればなるほどネストも自動的に深くなってしまいます。

ネスト量からサイトの構築の是非を判断するのは無理だと思います。  
なので余計な装飾効果のない括りを削除するなど（例えば意味もなくdivが2重で括られているなど）することで最小限度に努める事は大事ですが、CSS装飾の際に「なぜかこの括りでは表現が正常に出力されないから1段階ネストする」など例外はそこそこの頻度でありますので気に病まない方が良いかなと思います。

実際ネスト数だけでカウントすると自分が関わった実際の案件でMAX30弱の案件もありました。  
※サイト規模がとっても大きい為

追記：  
ネストに関しては例えばヘッダー・フッター・メニューバー部分などで同一の構成要素を設置したりします。  
サイト内でページが変わってもヘッダーフッターは変わらないなどありますね。

これが原因でメインコンテンツ部分のネスト初期値が＋8とかよくある話です。




クラス名の考え方ですが、はっきり言って開発者と後任のメンテナンスを行う人間が理解できるか否かが最も重要です。  
たまにやたら短い名称とかありますが、省略文字などで行うと1か月後の自分が見返しても理解できないことがあります。

以下はhtml系ではなく、一般的にC言語やpythonなどと呼ばれるような言語系で”関数名”や”変数名”を決定する際にこのようなワードを接続して表現することで表現の一致を目指したらどうか？  
という例文です。  
この単語がわかりやすいなど選り好みが異なるとは思いますので参考程度になれば幸いです。  
<https://qiita.com/KeithYokoma/items/2193cf79ba76563e3db6>

自分が見てきた中でクラス名で最も長かったのは6単語接続の英語で20文字弱くらいだったかなと思います。  
何はともあれ後から見返して何を示すクラス名ID名か理解できる名前を付けることを心掛けたほうが良いかなと思います。

ネストの深さに関しては実質無限と言えますが、まず表現したいサイトの理想の見た目について、絵として書き出してみてください。PowerPointなどでレイアウトしてもいいです。

その時、最小の四角範囲（ボタンだったりコラムブロック）に対しては大体1～3ネストくらい存在します。  
その最小ブロックを括るのに1ネスト、さらに上位のブロックに括って1ネスト・・・。  
となるのでサイトの中で表現したい要素が複雑になればなるほどネストも自動的に深くなってしまいます。

ネスト量からサイトの構築の是非を判断するのは無理だと思います。  
なので余計な装飾効果のない括りを削除するなど（例えば意味もなくdivが2重で括られているなど）することで最小限度に努める事は大事ですが、CSS装飾の際に「なぜかこの括りでは表現が正常に出力されないから1段階ネストする」など例外はそこそこの頻度でありますので気に病まない方が良いかなと思います。

実際ネスト数だけでカウントすると自分が関わった実際の案件でMAX30弱の案件もありました。  
※サイト規模がとっても大きい為

追記：  
ネストに関しては例えばヘッダー・フッター・メニューバー部分などで同一の構成要素を設置したりします。  
サイト内でページが変わってもヘッダーフッターは変わらないなどありますね。

これが原因でメインコンテンツ部分のネスト初期値が＋8とかよくある話です。

