HTMLとCSSを使ってサイトのコーディングの練習をしているのですが、クラス名の指定のルール、ネストの深さのルールをどう決めたらいいかわからないので質問させていただきました。
何かどのエンジニアさんも共通のルールを持っているか様々なコードを見ましたが、共通項が見出せませんでした。
ルールを決められなければサイトのコーディングに余計な時間がかかってしまうので困っています。
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とかよくある話です。
まず、HTML や CSS の仕様としてはクラス名をどのように付けなければならないという強い慣習はありません。つまり、質問者さんが試してみたい方法があれば、それを試してみて全く問題ありません。
そのうえで、無秩序に名前をつけていると生産性が落ちたりリファクタリングがしづらくなったりするためプログラマーが別途ルールを定めて運用している場合があります。たとえばクラス名については BEM や FLOCSS などのルールが知られています。これらには長所・短所があるので、利用するかどうかも含めてプロジェクトごとに方針が異なります。
また React などの宣言的なフレームワークの台頭に伴い、CSS in JS というやり方も流行しています。Emotion や styled-components が有名です。フレームワークにもよりますが、CSS in JS では人間が CSS のクラス名を付けない場合があります。
更に、何かしらのデザインフレームワーク、CSS フレームワークを使っている場合は、フレームワークの側でクラス名が決まっている場合があります。例として Tailwind CSS や Bootstrap、Chakra UI、MUI などがあります。
これはどのようにコーディングを行っているかによって、ネスト数を制限するかどうか、制限するにしてもどこまでにするか相当幅がある状態と思います。何か困ることがあれば困ってから考えるで良いのではないかなと個人的には思います。