Why CSS imports per route in Remix? - Purpose & Use Cases

The Big Idea

Discover how loading only the CSS you need can make your website lightning fast!

The Scenario

Imagine building a website where every page loads all the CSS styles for the entire site, even if many styles are not needed on that page.

This means users wait longer for pages to load and the browser has to process a lot of unused styles.

The Problem

Loading all CSS at once makes pages slow and clunky.

It wastes bandwidth and can cause style conflicts, making your site look broken or inconsistent.

Maintaining such CSS is also confusing because you don't know which styles belong to which page.

The Solution

With CSS imports per route, you load only the CSS needed for the current page.

This keeps pages fast, styles clean, and your site easier to maintain.

Remix automatically handles this by letting you import CSS files inside each route component.

Before vs After

✗ Before

import './global.css'; // loads on every page

✓ After

import './routeStyles.css'; // loads only on this route

What It Enables

This makes your website faster and more efficient by sending only the styles each page needs.

Real Life Example

Think of a store website where the homepage loads only homepage styles, and the product page loads product-specific styles, so users get a smooth, quick experience everywhere.

Key Takeaways

Loading all CSS globally slows down your site.

Importing CSS per route loads only needed styles.

Remix makes this easy and improves performance and maintenance.