id属性とclass属性は、CSSでのデザイン付けの回数で使い分けるものではありません。id属性は、HTMLの構造に関わる属性です。CSSでの見た目付け用ではありません。
２つの属性は根本的に役割が異なっています。
id属性は要素を特定し識別する
Webページは、いくつかのエリアに分けて作ります。
Webページ
上のような4つのエリアに分けたページの場合、どのエリアであるかという場所やその場所に配置してある特定のコンテンツを明示するのが、id属性の役割です。
特定のコンテンツであることを示す
HTMLでは、構造・意味を明確にする必要からHeader等は、専用のタグが用意されています。それでもなお、その位置とコンテンツにアクセスが必要である場合には、属性で特定化しておく必要があります。
Sub領域には専用のタグはありませんから、divでエリアを指定することになります。divタグだけでは、他のdiv領域と区別がつきませんから、（ここはMainエリアではありません。Sabエリアですよ、とid属性で）特定化する必要があります。
<div id="Sub" class="Sub-parent-design-style">
<p class="Sub-child-design-style">～</p>
...
</div>
id属性を理解するには、住所に例えて考えれば、分かりやすいでしょう。
同じ住所がいくつもあっては、手紙や荷物は届きません。住所はたった一か所に決まっていなければいけません。
id属性が、たった一つに決まっている理由もこれと同じです。同名のid属性を２か所に設定すると、どちらが正しいのかブラウザは分からず、正しい動作は保証されません。同じページに同名で２つ以上のidを振るのは間違いです。
なお、Web上の多くの説明は、id属性とclass属性の違いや使い分けが混乱、要領を得ません。
これは、Web上に出回るid属性とclass属性の解説情報が、デザインスクール系によるものが圧倒的に多いからです。（正式解説はmdnのみ）このため、デザイン系の情報がNet上に溢れ、AIに尋ねても、デザイン上のCSSやJS（JavaSpript）での装飾法の説明という的外れな回答に終始します。
class属性はデザインの命名用に
飾りつけのためには、class属性で名前付けをします。１回しか使わない場合でもデザイン付けはclass属性に当てはめます。
装飾の順序についての説明を付けたすと、例に挙げたWebページの場合、header以下のエリア自体の飾りつけもCSSで行うことができます。もちろんdivにid属性で特性付けしたSubエリアも同様です。この場合、エリア自体の装飾がclassで定義した飾り付けよりも優先するのは、当然です。（id付けした要素やheaderなどは、構造上、上位に位置します。）
CSSと構造については 親子関係と装飾
