Larger html size, or Larger CSS size? What is more efficient? [closed]

[alimcm1]

Option 1\[code\]<div class="eustice pettibone"> some content </div><div class="doris pettibone"> some more content </div>\[/code\]-\[code\].pettibone{ border: 2px dotted teal; box-shadow: 0 3px 5px rgba(0,0,0,0.4); width: 20px; height: 40px; padding: 50px; margin: 0 25px;} .eustice{ background: darkgreen; color: white;}.doris{ background: lightgreen; color: black;}\[/code\]Option 2\[code\] <div class="eusticePettibone"> some content </div> <div class="dorisPettibone"> yet even more content </div>\[/code\]-\[code\].eusticePettibone{ border: 2px dotted teal; box-shadow: 0 3px 5px rgba(0,0,0,0.4); width: 20px; height: 40px; padding: 50px; margin: 0 25px; background: darkgreen; color: white;} .dorisPettibone{ border: 2px dotted teal; box-shadow: 0 3px 5px rgba(0,0,0,0.4); width: 20px; height: 40px; padding: 50px; margin: 0 25px; background: lightgreen; color: black;}\[/code\]Option 1 has DRYer CSS but adds extra classes to the html. Option 2 has repetitive css, but with fewer classes in the html. Both options render identically.I've read plenty about both as workflows, but which is truly more efficient for the browser to layout?UPDATELet me be more clear. I am not asking about code maintenance, or what wins as far as workflow! I am using .styl anyway, so both outputs can be written completely DRY via mixins. I want to know what the browser will render faster.