In terms of performance/speed of the final product and according to the best practices - should Normalize.css be kept as separate file (linked from HTML head) or is it better to compile it into the final .css file?
I was searching here and on many other websites but couldn't find an answer. Hopefully, you'll understand my dilemma with this:
1. Leave normalize.css in node-modules folder and link to it from our html. I'm still fresh into coding, but if I understand correctly with this approach we will add one more (maybe unnecessary?) request to the server in addition to our main.css file? How bad is it or how taxing is it on performance/loading time of website?
<link rel="stylesheet" href="../node_modules/normalize.css/normalize.css">
<link rel="stylesheet" href="temp/styles/styles.css">
On the other hand, we can:
2. use 'postcss-import' to import normalize.css with the other modules and compile them all together into one final .css file.
Ok, now we have everything in one place, but we have just added 451 lines of code (and comments) before the first line our our actual css. In terms of readability it doesn't seem like the best solution to me, but is website going to load a bit faster now?
Disclaimer: I've been using the second approach so far, but I started asking myself if that is the optimal solution.
Thank you in advance.
You are quite correct in stating that a web page will load faster if it makes fewer requests to the server when loading. You are also correct in stating that the combined file is less readable than the individual files loaded separately.
Which is more important to you in your situation is a question only you can answer. That is why you are having a hard time finding definitive advice.
Personally I use the separate file option in development so that the files are easy to read and debug. Speed of loading isn't as important on a development machine.
In production websites I use the combined file option. In fact, I use combine and minify to reduce the number of files loaded and keep the size of those files as small as possible. Readability is less important in this situation.