HTML5/CSS : Is there a benefit in using multiple wrapper-divs within section-elements?

Question

多年前，我学会了通过将 body-tag 下面的所有内容放入带有类“wrapper”的 div 来制作网站。这些是有道理的(毫无疑问)，因为这样可以垂直和水平对齐整个内容。

昨天我看到了这个video-tutorial

在 07:15，他告诉我不应再使用上面描述的技术。取而代之的是，应该使用多个部分标签，并在内部分使用类“wrapper”的div。

这样 section-tags 是全屏的，内容可以与 wrapper-divs 对齐。

我做了这个演示来修改这样的结构:

$color1: rgba(173, 216, 230, 1.0);
html,
body {
  height: 100%;
}

body {
  background-color: #bbb;
  margin: 0 1%;
}

.wrap {
  width: 100%;
  max-width: 800px;
  margin: 5vh auto;
  background-color: white;
  text-align: center;
}

.content .wrap p {
  padding: 20px 5%;
}

.footer .wrap {
  background-color: #999;
  color: white;
  font-weight: 900;
  letter-spacing: 1.2px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet" />
<section class="header">
  <div class="wrap">
    <div class="callout secondary">
      <h1>This is a Top-Headline.</h1>
      <p>This is a Sub-Header.</p>
    </div>
  </div>
</section>

<section class="content">
  <div class="wrap">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
      quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
    <p>Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra
      nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet
      adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus
      tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.</p>
  </div>
</section>

<section class="footer">
  <div class="wrap">
    <p>&copy; 2017 by xyz</p>
  </div>
</section>

我的意思是:它有效。当然……

但我不明白具体的好处是什么。目前我认为它只是更多的 HTML。

另一方面，我不想不做一些调查就拒绝这个想法。

因此:

谁能给我举一个具体的例子，说明如何从这种嵌套的节包裹结构中获益？分别有什么作用？

Answer 1

是否将所有内容放在wrapper 中，完全取决于您的要求以及您希望如何管理它。

在 Web2.0 网站中，我们将 wrapper div 作为父级，所有内容都在其中 - 这提供了一个 固定 宽度的容器，我们的内容在页面中心看起来很合适.

但现在从 Web3.0 开始，我们更关注响应式和全屏网站，有时它需要具有特定或不同的 background-color 或 background-image 到其中一个页面部分，在这种情况下，具有多个 wrapper 类结构的情况会有所帮助。检查显示相同方法的代码片段。您无法通过旧方法轻松获得相同的输出。

section {
  padding: 30px 0;
  color: #333;
}

.section-1 {
  background: tomato;
  color: #fff;
}

.section-2 {
  background: yellow;
}

.container {
  width: 90%;
  margin: 0 auto;
}

.bg {
  background: url('http://lorempixel.com/output/nightlife-q-c-1024-720-6.jpg') no-repeat center;
  background-size: cover;
  color: #fff;
}

<section class="section-1">
  <div class="container">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
      quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
  </div>
</section>
<!-- I need a image as background and then text inside -->
<section class="bg">
  <div class="container">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
  </div>
</section>

<section class="section-2">
  <div class="container">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
      quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
  </div>
</section>