HTMLでクラス名を複数つけるメリットは？

Question

前提・実現したいこと

クラス名を2つ付けるのには、どのようなメリットがありますか？

HTMLのテキストに以下のようなコーディングが出てきたのですが、なぜ１つのクラス名じゃダメなのか、どうしても分かりません。

該当のソースコード

<header class="page-header wrapper"></header>

Comments

[m.ts10806]

「デメリット」は答えられますか？

Answer 1

フラグのような使い方をすることもあるので、「必ずCSSで何かしら指定があるクラスでなければならない」というルールはありません。

メリットが思い浮かばないからと無理に使う必要がありませんし、
きちんと意図があって使われているならそれで良いと思います。

メリットデメリットより「意図」「設計」のほうが大事かと思います。

Answer 2

＞クラス名を2つ付けるのには、どのようなメリットがありますか？

いろいろなことに使えますよ。

たとえば、ボタン要素が複数あったとして、
全てのボタンは「mybutton」クラスを使ってまとめてデザインして、
押されているボタンだけは「clicked」クラスを使って少し色を変えるとかクリックできないようにする
とかしますね。

<buttton class="mybutton">ボタン1</button>
<buttton class="mybutton">ボタン2</button>
<buttton class="mybutton clicked">ボタン3</button>

そして、
ボタン2がクリックされたら、
ボタン3からclickedクラスを削除してボタン2にclickedクラスを追加する

そうすると、ボタン2がクリックされたような動作を再現することができます。