CSSクラス名containerとwrapperの違い

今日は、CSSのクラス名をつけるときcontainerとwrapperの使い分けに決まりがあるのか疑問に思ったので調べてみました。

結論から言うと、使い分けに深い決まりはなさそう。

同じような疑問をもった人が「teratail」と言うサイトに質問していました。

wrapperとcontainerの違い｜teratail

class idの名前付け container、wrapper、inner、outer どのように使い分けるか｜teratail

自分だけで記述をするのであればcontainerもwrapperも好きなように使用していいようです。ただし、混在させるのは望ましくないよう。
また、チームでの開発で命名規則があればそれに従う。

Bootstrapではcontainerが意図的に使用されているようです。

＊　＊　＊

「Qiita」と言うサイトでは@manabuyasudaさんと言う方がCSSで使うクラス名をまとめていました。

CSSのクラス名を決めるときに使うリストをつくりました - Qiita

この記事の中にcontainerとwrapperの違いについて書かれていました
そのまま引用すると

wrapper - 内包する。
wrap - wrapperの略語。
container - wrapperの類語。容器・入れ物。wrapperはレイアウト的に、containerは意味的に使うことが多い。

この考え方はわかりやすい！！

＊　＊　＊

まとめ

container - wrapperの類語。
wrapperはレイアウト的に、containerは意味的に使うことが多い。

【注意】
　混在させるのは望ましくない。
　チームでの開発で命名規則があればそれに従う。

こんな感じの考えを持ってればいいのかな。

独学してるとクラス名に迷うことが多い。
今後も疑問に思ったことをnoteにまとめようと思います。