複数の class 属性を付けた際、どのようにスタイルを指定すればよいですか?

CSS で 1 つのスタイルごとにクラスを作成し、HTML 側でつけたいスタイルのクラスをそれぞれ指定する、という方法もあります。
2021年6月19日
ユーザー

HTMLで以下のように記述してみました。

<h1 class="info title test">大</h1>
<p class="info title">中</p>
<p class="info">小</p>

infoが付くclassに対して文字色がwhite
また大中小それぞれ背景色を付けるとしたら
結果が同じなのでどちらでも問題はないと思うのですが、
パターン1、2どちらが良いのでしょうか。

パターン1

.info {
  color: white;
  background-color: red;
}

.title {
  background-color: orange;
}

.test{
  background-color: Yellow;
}

*HTMLで「大 > 中 > 小」のようなclassの付け方をした場合、
 CSSで「小 > 中 > 大」の順番で記述するという考え方?

パターン2

.info.title.test{
  background-color: Yellow;
}

.info.title {
  background-color: orange;
}

.info {
  color: white;
  background-color: red;
}

class属性を正しく指定して、HTMLの順に合わせた方が良い??

例えば、記述が増えたときの汎用性が高い、こちらの方が見やすい、
などのポイントをご教示いただけないでしょうか。

この回答を見るにはプレミアムプランへの登録が必要です

プレミアムプランとは?

このレッスンの質問と回答(9)