I would like to know which of the following examples will perform better. If performance is the same, which one reads better?
Example 1 (Repeating Selectors)
.helpfulCommenter, .questionTroll {
color: #f00;
}
.questionTroll { text-decoration: line-through; }
or
Example 2 (Repeating styles)
.helpfulCommenter { color: #f00; }
.questionTroll { color: #f00; text-decoration: line-through; }
I know the class names are not semantic and the particular styles demonstrated here are irrelevant. I just want to know which of these do browsers have an easier time parsing and implementing.
The performance difference is so minuscule it's irrelevant.
Shy away from example 2 as it will, most likely, become a maintenance headache if abused.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With