Which code snippet below is more efficient?
First Example
.a {
color: #000;
width: 20px;
-webkit-transition: 0.3s all;
-moz-transition: 0.3s all;
-o-transition: 0.3s all;
transition: 0.3s all;
}
.b {
color: #333;
width: 40px;
-webkit-transition: 0.3s all;
-moz-transition: 0.3s all;
-o-transition: 0.3s all;
transition: 0.3s all;
}
.c {
color: #999;
width: 90px;
-webkit-transition: 0.3s all;
-moz-transition: 0.3s all;
-o-transition: 0.3s all;
transition: 0.3s all;
}<div class="a"></div>
<div class="b"></div>
<div class="c"></div>Second Example
.a {
color: #000;
width: 20px;
}
.b {
color: #333;
width: 40px;
}
.c {
color: #999;
width: 90px;
}
.smooth {
-webkit-transition: 0.3s all;
-moz-transition: 0.3s all;
-o-transition: 0.3s all;
transition: 0.3s all;
}<div class="a smooth"></div>
<div class="b smooth"></div>
<div class="c smooth"></div>In the first example, the same styles are applied individually to each div, while in the second example, the styles have been consolidated into one class and added to the divs.
Which approach will yield better performance?