The Drawbacks of Bundling All CSS Files Together

00:00 One common question I get about the global styles that we've got here, which is bringing our Rickroll into here, is why don't we just do this sort of thing for everything? These styles get brought in thanks to the CSS bundle href. And if we take a look at here, look at our CSS files, we're going to find we have our font style sheet right here, so we can look at our preview, there's our font, and we've got Tailwind right here, and then we've got our CSS bundle right here. And that CSS bundle is this CSS bundle href, so we dive into that, that's what we've got right here. So the question is then, okay, so why don't we just comment both of these out and here we'll just do this and do a side effect import for this one and a side effect import for this one as well.

00:48 And doing that, you'll see that the behavior is the same. But now we only have one CSS file. Now, isn't that better? It just means that the browser's like making fewer requests, right? Like, is that really a problem?

00:58 And if you do scroll through this, you will see it does have all of the CSS for our page, it has our fonts, it has that body background right here, all of that stuff. And the reason that I don't recommend doing this is because now that they're all in the same file, they are all, the cache for all of them is busted together. So what do I mean by that? Let's dive into this global and I'm going to add a color red and I save that. And now you'll see that the fingerprint here is going to be, is a completely different fingerprint.

01:31 And that means that all of the contents in here are completely busted or no longer available in the cache at all. The entire file has to be re-requested. So you deploy this And all of the CSS files that were in the user's browser cache before are no longer necessary or useful, and now we have to bring in this brand new file. And so this is just a little bit worse from a performance perspective to have everything in a single CSS file. The other reason why it's not a great idea to stick everything in a single CSS bundle href, and it's better in general to use the style sheets and specifically for one for each one of the style sheets, is because you get to control the order.

02:20 Whereas here, you do technically get to control the order when like with whichever one you import first. But once you start like having multiple files and stuff and importing styles in different files, the import order is a lot less deterministic. And so by specifying your links here, you can be very specific about what order you want different styles to be applied. And so that is the reason why I don't recommend using the CSS bundle href for all of your styles. It certainly makes a lot of sense for third-party libraries.

02:54 And if you need to use a reusable component that needs to carry its styles along with it for some reason, you want to use a CSS file for that, that totally makes sense. But for things where it's like, yeah, this is literally just something that we're, well here, whoops, right, there we go. For something like these style sheets, it just makes a lot more sense to have them be completely separate. That way, when you change one of them, you're not busting the cache for all of them. If I make this change here to change that back, we save that.

03:27 Now our Tailwind gg, whatever, that doesn't get changed. Our font doesn't get changed. It's just the CSS bundle that gets changed. And that is why I recommend that you use CSS bundle href only for some things. And in general, you want to import your styles via a link tag.

03:46 Hope that's helpful. See ya.