As the Weslley Tavares mentioned, the performance turns out to be better when using inline CSS (which is set the style attribute directly in the tag). But, unless you're using a framework that manages these attributes for you (more or less what the react.js does), or that you've written a server-side application that makes it easier, I very much doubt that this performance gain is worth it, even though it's practically nil.
Based on the assumption that you do this manually, I believe that the most advantageous is the use of classes. The use of sprites only gives you a huge gain in performance, and the handling of those classes - and HTML itself - for maintenance and scalability will be much easier once you have it in a separate file. This is the famous decoupling . Here you can read a rather interesting article on this.
Another thing that is nice to mention, although you have not asked, is the difference in performance between the use of IDs and classes. I already gave an answer about it here , where, I show that there is no difference (in terms of gain, you see), unless its application is extremely large. So when to that, you do not have to worry.
Another concern you should, yes, have, is about specificity. Here's an example:
div{
width: 100px;
height: 100px;
}
#testeID{
background: red;
}
.testeClasse{
background: green;
}
<div id="testeID" class="testeClasse"></div>
See that the ID is more specific than the class, that is, its rules will be those that will be applied in case of conflict. If I do
div{
width: 100px;
height: 100px;
}
#testeID{
background: red;
}
.testeClasse{
background: green;
}
<div id="testeID" class="testeClasse" style="background: blue"></div>
Notice that the inline rule now overrides the ID rule. Quite simply, specificity works like this.
tag rule < class < ID < style inline
In that other answer , I'll say more a bit about specificity, which can bring you a light when choosing how to build your code.
