Question

Which is better performance wise?

<a class="btn loginbtn" href="#">Login</a>​

.btn {
    background: #555 
}
.loginbtn {
    padding: 10px
}​

or

<a class="loginbtn" href="#">Login</a>​

.btn,.loginbtn {
    background: #555  
}
.loginbtn {
    padding: 10px     
}​

Since my CSS will be cached I was thinking the second one would be better.

Help me out please.

Answer 1

You could calculate the average performance difference caused by the difference in file size as the time it would take to fetch one more TCP/IP package times the probability that it would happen because of that change (i.e. package size divived by the number of characters added).

You might get something like 10 ms * 1/1000, which would give you 10 µs.

That is such a small performance difference that you have to make the same thing a huge number of times before it’s noticable.

So, you should use the one that is clearer and easier to maintain.

Personally I would go with the first option. I find it easier to see what’s applied to the element if there is a single path to follow from the class names to the rules, rather than having a class scattered across several rules.