Is there a difference between using inline CSS or Ids for a lot of different elements?

Question

On the page I’m doing I’m using a Spritesheet with more than 50 different images, but all are in the same file . png and need to pass the position from where each element is in that image (background-position).

Seeing the large amount of elements with unique styles, what is better I do:

To) Style each element with inline CSS <div style="background-position: 30px 20px;"> straight into HTML.
or
B) Have an ID for each element <div id="imagem_47"> and add the style of each in the CSS file #imagem_47 {background-position: 30px 20px;}.

Is there any difference in performance or compatibility between the two options? Or is it just a matter of taste and organization?

Answer 1

Like the Weslley Tavares mentioned, the performance turns out to be better when using CSS inline (which is to define the attribute style directly in the tag). But, unless you are using a framework that manages these attributes for you (more or less than the React.js does), or that you have written a server-side application that facilitates this, I doubt very much that this performance gain is worth, even because it is practically null.

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 already brings you a huge performance gain, and the handling of these classes - and the HTML itself - in view of maintenance and scalability will be much easier, once you have it in a separate file. This is the famous decoupling. Here you can read an article (in English) quite interesting about it.

Another nice thing to mention, although you haven’t asked, is the difference in performance between using Ids and classes. I have already given an answer on that here, where, basically, I show that there is no difference (in terms of gain, see well), unless its application is extremely large. So when to that, you don’t have to worry.

Another concern you should, yes, have is with regard to specificity. Take this example:

div{
  width: 100px;
  height: 100px;
}

#testeID{
  background: red;  
}

.testeClasse{
  background: green;  
}

<div id="testeID" class="testeClasse"></div>

Note 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>

see that, now, the rule inline overwritten the ID rule. Quite softly, the specificity works like this

tag rule < class < ID < style inline

In that other answer, i talk a little more about specificity, which can bring you a light when choosing how to build your code.

Answer 2

Well, when using the option to create a CSS file, what prevents you from creating classes instead of setting directly to the component, through the ID? If your application changes (due to scalability or maintenance) this process would be much less painful.

Another thing, even though the components present different behaviors, in the general context, they may present some compatibility between one attribute and another, which could already be reused through the classes defined in the CSS. Anyway, this is a project management thing (and good practices).

And going back to the issue of performance, inline turns out to be better, since the page won’t have to perform GET to fetch the CSS file, however, this gain from the inline before the CSS is still not enough to compare with the gain obtained in its encoding when using the CSS.

I hope I’ve helped.