プレビューすると見た目は同じだが、書いてあるコードが違うのでこれで支障が生じるのか知りたい

Question

前提・実現したいこと

下に書いてあるソースコードを実行すると見た目は同じことが実行されるが、上の例や下の例を使うことによって発生する違いはあるのかを知りたい。

発生している問題・エラーメッセージ

エラーは発生していません

該当のソースコード

ソースコード
HTML
<div class="contents">
    <h1>レッスン</h1>
</div>
CSS
.contents h1{
  border-bottom: 2px solid #dee7ec;
}
と
HTML
<div class="contents">
    <h1 class="lesson-title">レッスン</h1>
</div>
CSS
.lesson-title {
  border-bottom: 2px solid #dee7ec;
}
### 試したこと

実行してみたが見た目は同じである

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[m.ts10806]

(質問は編集できます)
コードはマークダウンのcode機能を利用してご提示ください。
どのような見た目になるのかは他の質問や回答を参考にし、投稿前にプレビュー確認してください。

[m.ts10806]

あと、「上の例」「下の例」ってなんでしょうか

Answer 1

何を「支障」と捉えているのか不明ですが、このコードだけだと「ほぼ支障なし」と言えます。
もっと要素が増えて複雑に入り乱れるようになると調整が必要になることも出てくるのでは。
つまり要件次第。
大抵は画面設計してからどこにstyleを割り振るのか決めるので、余程の大追加でもなければ大改修に踏み切ることはないのではないでしょうか。
設計段階でどこまで想定するかによります。

Answer 2

上の例は、contentsクラス内のh1要素にスタイルを設定している。
下の例は、lesson-titleクラスにスタイルを設定している。
という違いがあります。

結局、設定する対象は同じなので見た目は同じになります。
よって、現状では支障はないといえます。

将来、contentsクラス以外の場所にもこのスタイルを設定する可能性があるなら、下の例の方がいいでしょう。
将来も、このスタイルはcontentsクラス内のh1要素にしか設定しないなら、上の例にすればいいでしょう。

将来のことが分からないなら、どちらでもいいですが、下の例の方が柔軟性があると思います。

Answer 3

詳細度の視点からの違いでいえば、この順で両方書いた場合でもより詳細度の高いほう(点線)になります。

.contents h1 {
  border-bottom: 2px dotted #dee7ec;
}

.lesson-title {
  border-bottom: 2px solid #dee7ec;
}

https://developer.mozilla.org/ja/docs/Web/CSS/Specificity

Answer 4

変わってくるのはこんなときでしょうか。

<div class="contents">
  <h1>レッスン</h1>
</div>
<div class="contents">
  <h1>レッスン</h1>
</div>
<div class="contents">
  <h1>レッスン</h1>
  <h1>レッスン2 </h1>
</div>

.contents h1{
  border-bottom: 2px solid #dee7ec;
}

表示結果↓

---

<div class="contents">
  <h1 class="lesson-title">レッスン</h1>
</div>
<div class="contents">
  <h1>レッスン</h1>
</div>
<div class="contents">
  <h1>レッスン</h1>
  <h1>レッスン2 </h1>
</div>

.lesson-title {
  border-bottom: 2px solid #dee7ec;
}

表示結果↓

---

上の例と下の例では明らかに表示が異なりますよね。

上だと、contentsクラスがついているdivタグの中にいる h1タグ全てに下線がつき、

下だと、lesson-title クラスがついているh1タグのみに下線がつきます。

あくまでも一例で、他にも応用方法はいくらでもあります。

色々書いてみるとわかりやすいですよ