3

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.

nemanja
  • 664
  • 5
  • 16

2 Answers2

2

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.

Philip Smith
  • 2,741
  • 25
  • 32
  • Thank you Philip (@philip-smith). I guess with that approach (which I am using and which I have luckily learned early from very good tutorial) we're having the best of both worlds. Good organization and readability in development phase and improved performance after our site goes live. One potential downside would be if someone needs to edit our code in the future and he/she doesn't have modules, or source files. It would be messy for them. But, that is one huge "what if" and probably not very likely to happen :) – nemanja Oct 29 '17 at 03:37
  • I write websites in ASP.NET and this allows me to set a value in the Web.config file which controls bundling and minification. So it is possible to turn it on/off on any machine, with re-compiling :). – Philip Smith Oct 29 '17 at 03:59
0

Ideally adding normalize.css to your final css would be done in a post processing step that combines all of your source files into one file and minifies the whole thing. That way your source is still readable but you end up only loading one file.

  • that is exactly what I am doing now. I keep separate source files (modules) in ./app/assets/styles/modules/ and postcss-import is dealing with compiling them together. Everything is neatly organized while I am working on the site, but my concern was more about the part which comes after website goes live. Namely I didn't know if browsers handle better more lines of code or more server requests. :) – nemanja Oct 29 '17 at 03:23