91595


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

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

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


CC BY-SA 4.0
2022-10-12T21:53:41.767
91571
2022-10-23T12:57:23.570
54812
question
html
HTMLを書く上でのクラス名指定や、ネストの深さのルールがわからない


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

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

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

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

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

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

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

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

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


CC BY-SA 4.0
2022-10-14T08:41:29.090
91595
2022-10-14T08:48:54.207
2022-10-14T08:48:54.207
51823
51823
91571
answer


## CSS のクラス名

まず、HTML や CSS
の仕様としてはクラス名をどのように付けなければならないという強い慣習はありません。つまり、質問者さんが試してみたい方法があれば、それを試してみて全く問題ありません。

そのうえで、無秩序に名前をつけていると生産性が落ちたりリファクタリングがしづらくなったりするためプログラマーが別途ルールを定めて運用している場合があります。たとえばクラス名については
[BEM](https://getbem.com/introduction/) や
[FLOCSS](https://github.com/hiloki/flocss)
などのルールが知られています。これらには長所・短所があるので、利用するかどうかも含めてプロジェクトごとに方針が異なります。

また React などの宣言的なフレームワークの台頭に伴い、[CSS in JS](https://b.0218.jp/202202182358.html)
というやり方も流行しています。[Emotion](https://emotion.sh/docs/introduction) や [styled-
components](https://styled-components.com/) が有名です。フレームワークにもよりますが、CSS in JS
では人間が CSS のクラス名を付けない場合があります。

更に、何かしらのデザインフレームワーク、CSS フレームワークを使っている場合は、フレームワークの側でクラス名が決まっている場合があります。例として
[Tailwind CSS](https://tailwindcss.com/) や
[Bootstrap](https://getbootstrap.jp/)、[Chakra UI](https://chakra-
ui.com/)、[MUI](https://mui.com/) などがあります。

## HTML や CSS のネスト

これはどのようにコーディングを行っているかによって、ネスト数を制限するかどうか、制限するにしてもどこまでにするか相当幅がある状態と思います。何か困ることがあれば困ってから考えるで良いのではないかなと個人的には思います。


CC BY-SA 4.0
2022-10-23T12:57:23.570
91767
2022-10-23T12:57:23.570
19110
91571
answer