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

ok, i've been taught should use wrapper <div></div> if absolutely necessary, since creating unneeded element in dom wastes resources.

however, let's have 5 child elements need left margin of 10%. writing css each 1 less intensive making new div?

so code this:

scenario 1: wrapper

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

scenario 2: no wrapper , elements styles 1 css entry

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

scenario 3: no wrapper , elements have styling

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

also, number of elements need same styling change answer??

thanks thoughts, want start forming habits :)

the better solution is:

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

this example. please not name classes 'div'.