资源密集程度较低：使用额外的html元素包装多个div，或者单独设置几个未包装的元素？

Question

好的，我已经被告知如果绝对必要，你应该只使用包装器<div></div>，因为在DOM中创建一个不需要的元素会浪费资源。

但是，我们假设您有5个子元素，这些元素都需要10％的左边距。是否会为每一个写css而不是制作一个新的div？

所以代码看起来像这样：

方案1：包装

<div class='wrapper'>
    <div class='div1'></div>
    <div class='div2'></div>
    <div class='div3'></div>
    <div class='div4'></div>
    <div class='div5'></div>
</div>



.wrapper{
    margin-left: 10px
}

方案2：没有包装器和所有具有一个css条目的元素样式

    <div class='div1'></div>
    <div class='div2'></div>
    <div class='div3'></div>
    <div class='div4'></div>
    <div class='div5'></div>



.div1,
.div2,
.div3,
.div4,
.div5{
    margin-left: 10px
}

方案3：没有包装器且元素已经具有样式

<div class='div1'></div>
<div class='div2'></div>
<div class='div3'></div>
<div class='div4'></div>
<div class='div5'></div>



.div1{
    margin-left: 10px
}
.div2{
    margin-left: 10px
    color: red
}
.div3{
    margin-left: 10px
    color: blue
}
.div4{
    margin-left: 10px
    color: white
}
.div5{
    margin-left: 10px
    color: green
}

此外，需要相同样式的元素数量是否会改变您的答案？

感谢您的想法，我想开始养成良好的习惯：）

Answer 1

更好的解决方案是：

HTML

<div class="div div--one"></div>
<div class="div div--two"></div>
<div class="div div--three"></div>

CSS

.div {
  margin-left: 10px;
}

.div--two {
  color: red;
}

.div--three {
  color: yellow;
}

这显然只是一个例子。请不要为您的课程命名＆＃39; div＆＃39;。