What CSS is best: external or internal?
For the last couple of months, or even years, I’ve been tweaking the design of this website. A lot. Sometimes wasting time on details instead of — you know — doing some actual writing. But I’ve noticed that these past few weeks, my mind has matured into some sort of equilibrium or balance regarding the design.
By balance I mean that I cannot now remove or add anything more without compromising either the way this blog looks, its usability, or its weight. Finally, this website seems to be finished; therefore I should spend all my time writing more nonsense instead of asking myself stupid questions like: What CSS is best: external or internal? And no, I’m not talking about “inline” CSS.
Before you jump on hitting that reply button below to tell me the answer, let me first explain my train of thought.
The CSS file for this website is 215 bytes. If I use an external stylesheet for this CSS, I have to link to it in the head part of the page. This code in the head is 99 bytes on its own. This part — if I understand well — won’t be cached since the head is fully there for the browser, whether or not the external stylesheet referenced in it is cached or not.
Does that make sense so far?
Then, if I add the dark/light mode thing into the head itself instead of within the CSS file, which is recommended, the total “CSS” bit of the head amounts to 146 bytes (the dark/light thing and the link to the stylesheet).
When I add the CSS in the head, internal CSS style, the code amounts for 159 bytes (for the homepage, as some part of the CSS can move to specific pages, like posts).
So, on my homepage, the difference between external and internal CSS varies between 13 and 60 bytes only, depending on how I specify the dark/light mode thing. If I want to put the whole CSS as internal, and not just the CSS specific to the homepage, this difference jumps to 110-157 bytes. Which is more or less the weight of the previous sentence, which is very small indeed.
The advantage of external CSS is that it can be cached by the browser: the stylesheet is downloaded from the server on the first visit only, meaning the following visits won’t require this extra server request.
The advantage of internal CSS is that it doesn’t require this extra request to the server on the first visit, but the browser will then load 13 to 157 extra bytes on each visit.
Then there is the question about HTTP/2; does it mean some part of the code can get cached too, like the whole head section? This is where things gets too complicated for me and where I get confused on what is best, what makes sense, and what is more efficient.
Another advantage of using a proper stylesheet (external CSS), is that it is much easier to maintain, less prone to mistakes, and much more elegant to have everything CSS-related in just one place. But when your whole CSS is 215 bytes for a total of 5 elements, maintenance really is a non-issue.
So what should I do? What is best? What am I missing? You can now proceed to clicking on the reply button to tell me what the obvious answer is. Hopefully the answer is: “It doesn’t matter.” Thank you.