Code splitting with CSS and JS

What is code splitting?

Basically, it's splitting your code up into separate files, rather than having it all in one file. Let's say you have a really simple website with three sections: header, main and footer. You'd put your CSS for the header in one file, your CSS for the main in another file, and the CSS for the footer in a third file. Then you have an index file to tell it to use these three files, which the HTML points to.

Why would you split your code up?

One thing it does is to make it easier to find things. If you know you want to find something in the header's CSS you know it's in the header CSS file, rather than somewhere in a long CSS file.

You might think, as I did, that it's perfectly easy to find things in one file as long as you're organised. You can do things like this to make the sections easier to find:

/********************** Header **********************/
.menu {
  background-color: black;
}

Then no matter where you are in the file, it's easy to see the lines that stick out a lot further than the rest. The thing is, if you know you're looking for the header section, then you can just open the header file. I really thought the method of commenting sections was perfectly fine, until I tried code splitting and found this was easier, when you have a lot of CSS.

You might also think that it's easier to do a search in just one file. However, if you have a decent IDE it will have an option to search through all files in the project, or all open files. So it's no different to searching in just one file.

Any other reasons?

Yes. Well, sort of.

If three people were working on our imaginary simple website, each working on a different section, it would make things easier if they did things in separate files - no need to worry about merge conflicts. But if you're the only one working on the project, then that's not going to make a difference, unless you want to get used to the ways this would work in a job.

Theoretically it will make your site/app faster. This is because the browser caches files and if you only change one it can use the rest of the cached files. I say theoretically because it depends on what you do here. So if you had your CSS and JS in the HTML file, then splitting them into separate files will help. If you do what I do with SCSS files and have a bundler put them into one CSS file that's not going to make a difference.

How do I do it?

The easiest way is to have your separate files and then link them separately, the same way you do for any file.

<link rel="stylesheet" type="text/css" href="header.css" />
<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" type="text/css" href="footer.css" />

And there you have all your CSS on your page, with the speed advantage, since the HTML is using three files rather than one.