CSS ページ全体の横幅はbodyにつける？

Question

一般的なwebサイトを作るにあたり、サイト全体の横幅は
0. bodyにつける

1. bodyの子要素に全体を包括する要素を作り、それにつける

方法があるかと思います。

これについて、双方それなりのメリットデメリットは存在するのでしょうか？
（簡単な質問内容で申し訳ないです）

※追記
また、例えばheaderやfooterなど、必ず一つしか存在しない要素に対して、

header {
  margin: 10px;
}

と、クラスを付与せず直接スタイルを当てることで生じる問題はありますか？

Answer 1

私の場合は、

body {
margin: 0px auto;
padding: 0px;
text-align: center;
}

wrapper {
margin: 0px auto;
text-align: left;
overflow: hidden;
}

というように作っています。bodyで全体を中央にして、wrapperで文字位置を左寄せにしています。横幅の定義はwrapperの下で行っています。実際に横幅が必要な所で定義しているようです。（正しくはwrapperの前に#がつきます。大文字になってしまうので削除してあります。）

Comments

[sii_side]

コードは ``` で囲うとコードブロックを形成できますよ！

ヘルプ｜teratail（テラテイル）
https://teratail.com/help#about-markdown

Answer 2

一般的なwebサイト、というのは、おそらくYahooのようなデザインに対してかと思いますが、
特に大きなメリットデメリットとかは無いので、
どう組むのが組みやすいかとか、正直、好みの問題でいいと思います。
https://www.yahoo.co.jp/

自分だったら、2番のやり方にします。
タグの意味としては、「文書の内容」を示すものですし、
全体に対するフォント系、line-heightや基本の色とかは大体bodyに指定、
背景が白じゃなければ、背景もbodyに指定することが多いので、
コンテンツの横幅を指定するのは、子要素でdivなど作ってそちらに指定します。

例えばheaderやfooterなど、必ず一つしか存在しない要素に対して、...

header、footerは、1ページ内に複数OKです。
サイト全体としてのヘッダー、そのなかにある記事のヘッダーをなど、各セクションに対するヘッダー、フッターとして使用可能です。
Wordpressのデフォルトインストール時、記事のヘッダーがheaderタグになっていたかと思います。

mainであれば、「.main」とかつけることなくタグ指定にする事が多いです。

Answer 3

サイト全体（コンテンツ）の横幅についてですが、

1. bodyにつける
2. bodyの子要素に全体を包括する要素を作り、それにつける

他の回答にあるように「絶対にこうするべき！」は無いです。2番の方が変更等に対応しやすいので、多用されてはいます。

※「コンテンツの幅」以外で、各ブラウザや各デバイスでの見え方を統一する為に＜html＞や＜body＞にもリセット等は掛けておく必要があります。

---

クラスを付与せず直接スタイルを当てることで生じる問題はありますか？

特にないです。特定のページで違うスタイルをあてる時に、クラスを付与すれば良いです。