哪个资源占用较少：用一个额外的 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：没有 Wrapper，所有元素样式只有一个 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：没有 Wrapper，元素已经有样式

<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;
}

这显然只是一个例子。请不要命名您的类 'div'.

哪个资源占用较少：用一个额外的 html 元素包装多个 div，或者单独设置几个未包装的元素的样式？

which is less resource intensive: wrapping multiple divs with an extra html element, or styling several unwrapped elements individually?

html

css

styling

场景 1：包装器

场景 2：没有 Wrapper，所有元素样式只有一个 css 条目

场景 3：没有 Wrapper，元素已经有样式