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の順に合わせた方が良い？？

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