ブロック要素をさらにdivで囲む理由

Question

これはprogateのレッスンの一部なのですが、divやulタグなどのブロック要素をさらにdivで囲む必要性について、あまり理解できないのですが、なぜ囲む必要があるのでしょうか？
(divを<div class= "container">などで囲む理由も同様に不明）

ulに直接クラス名をつけてCSSを当てても問題ないように思えます。

<div class = "header">
  <div class = "header-list">
    <ul>
      <li>
      <li>
      <li>
    </ul>
   </div>
</div>

Answer 1

CSSを確認しないとなんとも言えないところがありますが、headerが横長で、header-listはその横長の要素のうちの一部（例えば左3分の1）を占めるような表示をするhtmlでしょうか。
このhtmlだけを確認すると、確かにご質問の通りulをdivで囲む必要性は感じられません。

ただし例えば後になって誰かが「リストをもう一つ増やしてほしい」と言い出した場合、divで囲っているメリットも出てきます。

具体的には以下のようにコードを変更すれば良いからです。

<div class = "header">
  <div class = "header-list">
    <ul>
      <li>
      <li>
      <li>
    </ul>
    <ul>
      <li>
      <li>
      <li>
    </ul>
   </div>
</div>

もしulに直接クラス名をつけていた場合、リストを増やした上でレイアウトが今までと同じであることを求められたときに柔軟性がなくなる恐れがあります。
試しに、divを削除してulにクラスを付与してレイアウトを実現していた場合、もう一つリストを増やそうとするとどうすれば良いか考えてみてください。

そもそもdivとは「囲った範囲をブロック要素にする」というような抽象的な要素です。
そのため、画面のレイアウトはdivで構成し、細かな要素はdiv内の細かな要素で記載する、という方針でhtmlの要素を組み立てていくという流儀もそれなりに存在します。

もちろん、後で変更が加えられないことが保証されているのであればご質問の通りulにクラス名を付与するのも全く問題ありません。
同じ結果を得られるコードはたくさんあるのですが、それぞれの実現方法にメリットデメリットがありますので、適宜取捨選択して採用していくことが必要になります。

Answer 2

ヘッダーというものは多分position:fix;にしたいだろう
そして後からヘッダーの「要素の下に何かを追加」したいとなった場合
ヘッダー全体という囲みでposition:fix;になっておらず
ヘッダーの部品毎にposition:fix;になっていると
「要素の下に何かを追加」するのがいちいちめんどくさいことになる

.headerをposition:fix;にして
.header-listはそうしないことで
.header-listの下に何かを追加するのがメンドくさくなくなる

ul.header-listとせず
div.header-list>ulとしているのは

div.header-list{
  background:url('menu-bar-bg.png') repeat-x;
  ul{
    width:960px;
    margin:0 auto;
    list-style:none;
  }
}

みたいな感じのことをしたいからじゃないかと推測
ul単体だと、左右に背景をつけつつ
指定した幅で真ん中寄せが結構しんどい

デザインの為だけの要素というのはなるべく避けたいものではあるが
絶対にあってはならないというようなものでもなし

効率と秤に掛けてより良い判断を