クラス作成の考え方について知りたいです。

下記は同じ内容でクラスの数が異なりますが、
どちらの記述方法が好ましいのでしょうか？

考え方を理解したいと思っており、
理由を添えてご回答いただけますと幸いです。

HTML
1【パターンA】
2<div class="welcome">                    
3+  <h1>HELLO WORLD</h1>            
4+  <h2>ようこそ</h2>                              
5</div>
6
7【パターンB】
8<div class="welcome">           
9+   <div class="copy-container">            
10+        <h1>HELLO WORLD</h1>            
11+        <h2>ようこそ</h2>            
12+   </div>            
13 </div>

CSS
1パターンA
2.welcome{
3+  padding:100px 80px;            
4                                 }                                          
5.welcome h1{            
6+  font-size:140px;            
7                                 }                                             
8.welcome h2{            
9+  font-size:60px;            
10                                 }
11
12パターンB
13.welcome {            
14+  padding: 100px 80px;            
15                                 }                                      
16.copy-container h1 {            
17+  font-size: 140px;            
18                                 }            
19.copy-container h2 {            
20+  font-size: 60px;            
21                                 }

BeatStar

2021/07/03 11:37

コードは"<code>"または"<コード>"を押して出てくるやつの中に書きましょう。

mevius001

2021/07/06 12:44

修正しました。申し訳ありません、試行錯誤しましたが HTMLとCSSで２項目に分ける技術が至りませんでした。ご教授いただきありがとうございます。

K_3578

2021/07/07 00:21

他の質問とか見てどうやってるか見れば良かったと思いますが･･･ ```で上下を囲んだ範囲がコードブロックになります。現在は、htmlのコードブロックの閉じる```がないため、cssの始まりの```を閉じる```と認識されている訳です。なので、 </div> ``` という形にしてやれば良いです。因みにコードブロック内では太字にしたりは出来ません。

mevius001

2021/07/10 12:25

お教えいただきありがとうございます。記載方法が変更できました。