CSS imports per route in Remix - Deep Dive

Overview - CSS imports per route

What is it?

CSS imports per route means loading only the CSS styles needed for each page or section in a Remix app. Instead of loading all styles at once, each route imports its own CSS file. This keeps the app faster and cleaner by sending less unused CSS to the browser.

Why it matters

Without CSS imports per route, users download all styles even if they only visit one page. This slows down loading and wastes data, especially on slow connections or mobile devices. By loading CSS per route, the app feels quicker and uses less memory, improving user experience and performance.

Where it fits

You should know basic Remix routing and CSS usage before learning this. After mastering CSS imports per route, you can explore advanced Remix features like nested routes, route modules, and optimizing assets for production.

Mental Model

Core Idea

Load only the CSS needed for the current page by importing styles inside each route module.

Think of it like...

It's like packing a suitcase only with clothes you need for a specific trip instead of carrying your entire wardrobe everywhere.

┌───────────────┐
│ Root Route    │
│ (global CSS)  │
├───────────────┤
│ Route A       │── imports CSS-A.css
│ Route B       │── imports CSS-B.css
│ Route C       │── imports CSS-C.css
└───────────────┘

Browser loads only the CSS file for the active route plus any global styles.

Build-Up - 7 Steps

1

Foundation

Understanding Remix Routes Basics

Concept: Learn how Remix organizes pages using routes and route files.

Remix uses a file-based routing system. Each file in the routes folder corresponds to a URL path. For example, routes/index.tsx is the home page, and routes/about.tsx is the /about page. Each route exports a React component that renders the page content.

Result

You can create multiple pages by adding files to the routes folder, and Remix automatically handles navigation between them.

Knowing how routes map to files is essential because CSS imports per route depend on placing CSS imports inside these route files.

2

Foundation

Basic CSS Import in Remix

Concept: Learn how to import CSS files in Remix route modules.

In Remix, you can import CSS files directly in your route component file using import statements. For example, import styles from './styles.css'; This makes the CSS available to that route. Remix processes these imports and includes the styles in the page.

Result

The CSS styles you import affect only the route where you imported them, not the entire app.

Importing CSS inside route files is the foundation for loading styles per route, avoiding global CSS bloat.

3

Intermediate

Using Remix Links Export for CSS

🤔Before reading on: do you think importing CSS alone is enough to load styles per route, or do you need to tell Remix explicitly? Commit to your answer.

Concept: Remix requires a special export called links() to tell it which CSS files to include in the HTML for each route.

In your route file, export a links function that returns an array of objects with rel and href properties pointing to your CSS file. For example: export function links() { return [{ rel: 'stylesheet', href: styles }]; } This tells Remix to add a tag for your CSS only when this route is active.

Result

Only the CSS files declared in the active route's links() function are loaded by the browser.

Understanding the links export is key because it controls which CSS files Remix sends to the browser per route.

4

Intermediate

Handling Global vs Route CSS

🤔Before reading on: do you think global CSS should be imported in each route or separately? Commit to your answer.

Concept: Separate global CSS that applies everywhere from route-specific CSS to avoid duplication and improve caching.

Create a root route file (e.g., routes/root.tsx) that imports global CSS and exports it via links(). Then, each child route imports only its own CSS. This way, global styles load once, and route CSS loads only when needed.

Result

Global styles are always available, and route styles load only on their pages, improving performance and maintainability.

Separating global and route CSS prevents unnecessary style loading and keeps your app scalable.

5

Intermediate

Dynamic CSS Loading with Nested Routes

🤔Before reading on: do you think nested routes share CSS automatically or need separate imports? Commit to your answer.

Concept: Nested routes can have their own CSS imports, and Remix merges them when rendering nested layouts.

Each nested route exports its own links() with CSS. When a nested route renders, Remix combines all links() from parent and child routes, loading all needed CSS. This allows modular styling per route level.

Result

Nested routes load combined CSS from all active route levels, ensuring styles are scoped and complete.

Knowing how Remix merges links() helps you organize CSS for complex nested layouts without duplication.

6

Advanced

Optimizing CSS Imports for Production

🤔Before reading on: do you think Remix bundles all CSS into one file in production or keeps them separate? Commit to your answer.

Concept: Remix optimizes CSS imports by bundling and splitting CSS files for faster loading in production builds.

During build, Remix analyzes CSS imports and creates optimized bundles. It splits CSS per route to enable lazy loading. This reduces initial load size and improves caching. You can also configure caching headers for CSS assets.

Result

Users download only the CSS needed for the current page, speeding up load times and reducing bandwidth.

Understanding Remix's build-time CSS optimization helps you write CSS imports that benefit from automatic performance improvements.

7

Expert

Avoiding CSS Flash and FOUC Issues

🤔Before reading on: do you think CSS imported per route can cause flashes of unstyled content (FOUC)? Commit to your answer.

Concept: Loading CSS per route can cause brief flashes of unstyled content if styles load late; Remix uses server rendering and link preloading to prevent this.

Remix renders pages on the server with CSS links included in the HTML head. This ensures styles load before the page displays. It also preloads CSS for faster client navigation. However, improper links() usage or missing CSS can cause FOUC.

Result

Proper CSS imports per route avoid visual glitches and provide smooth style transitions between pages.

Knowing how Remix handles CSS loading timing helps you prevent common UI flicker problems in production.

Under the Hood

Remix treats each route as a module that can export a links() function. This function returns CSS file references. During server rendering, Remix collects all links() from active routes and inserts tags in the HTML head. The browser then loads only these CSS files. On client navigation, Remix dynamically updates the tags to match the new route's CSS. This modular approach leverages HTTP caching and lazy loading.

Why designed this way?

Remix was designed to improve performance by avoiding loading all CSS upfront. Traditional apps bundle all styles, causing slow loads and wasted bandwidth. By tying CSS imports to routes, Remix enables granular control and better caching. This design balances developer experience with user speed, using modern web standards like server rendering and dynamic link management.

┌───────────────┐      ┌───────────────┐
│ Route Module  │      │ links() export│
│ (e.g. about)  │─────▶│ [{rel, href}] │
└───────────────┘      └───────────────┘
         │                      │
         │ Server collects all links() from active routes
         ▼                      ▼
┌───────────────────────────────────────────┐
│ HTML <head> includes <link rel="stylesheet" href="..."> tags │
└───────────────────────────────────────────┘
         │
         ▼
┌─────────────────────┐
│ Browser loads CSS   │
│ only for active route│
└─────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does importing CSS in a route file automatically load it in the browser? Commit to yes or no.

Common Belief: If you import a CSS file in a route component, the styles automatically load on that page.

Reality: In Remix, importing CSS alone does not load styles. You must export a links() function that returns the CSS file for Remix to include it in the HTML.

Why it matters: Without exporting links(), the CSS won't load, causing missing styles and broken UI.

Quick: Do all routes share the same CSS files by default? Commit to yes or no.

Common Belief: All routes share the same CSS files globally, so importing CSS in one route affects all pages.

Reality: CSS imported per route is scoped to that route only. Other routes do not load or apply those styles unless they import them too.

Why it matters: Assuming global CSS causes confusion when styles don't appear on other pages, leading to bugs.

Quick: Does Remix bundle all CSS into a single file in production? Commit to yes or no.

Common Belief: Remix always bundles all CSS into one big file for simplicity.

Reality: Remix splits CSS per route in production to enable lazy loading and better caching.

Why it matters: Expecting a single CSS file can mislead developers about performance and caching behavior.

Quick: Can CSS imports per route cause flashes of unstyled content (FOUC)? Commit to yes or no.

Common Belief: Loading CSS per route always causes visible flashes of unstyled content when navigating.

Reality: Remix server renders pages with CSS links included, preventing FOUC if links() are used correctly.

Why it matters: Misunderstanding this leads to unnecessary workarounds or abandoning per-route CSS.

Expert Zone

1

Remix merges links() exports from all active nested routes, so CSS from parent and child routes load together seamlessly.

2

CSS imports per route leverage HTTP caching aggressively; unchanged CSS files are cached by browsers, speeding up repeat visits.

3

You can conditionally include CSS in links() based on route data or environment, enabling dynamic styling strategies.

When NOT to use

Avoid per-route CSS imports if your app uses a global CSS framework or utility-first CSS like Tailwind configured globally. In such cases, global CSS or CSS-in-JS solutions might be better. Also, for very small apps, per-route CSS may add unnecessary complexity.

Production Patterns

In production Remix apps, developers organize CSS by route modules, use links() for style loading, and rely on Remix's build optimizer to split CSS bundles. They combine global styles in root routes and lazy-load route-specific styles to improve performance and maintainability.

Connections

Code Splitting

CSS imports per route are a form of code splitting focused on styles.

Understanding CSS imports per route helps grasp how code splitting reduces load times by sending only needed code and styles.

HTTP Caching

Per-route CSS imports leverage browser caching by serving separate CSS files with cache headers.

Knowing how HTTP caching works explains why splitting CSS per route improves repeat visit speed.

Modular Design in Architecture

Just like modular building blocks in architecture, per-route CSS keeps styles isolated and manageable.

Seeing CSS imports as modular pieces helps appreciate maintainability and scalability in large apps.

Common Pitfalls

#1 Forgetting to export links() with CSS files in route modules.

Wrong approach:

import styles from './styles.css';

export default function Page() {
return Hello;
}

Correct approach:

import styles from './styles.css';

export function links() {
return [{ rel: 'stylesheet', href: styles }];
}

export default function Page() {
return Hello;
}

Root cause:

Misunderstanding that importing CSS alone does not load styles; links() export is required for Remix to include CSS.

#2 Importing global CSS in every route instead of once in root route.

Wrong approach:

In every route file:
import globalStyles from '~/styles/global.css';

export function links() {
return [{ rel: 'stylesheet', href: globalStyles }];
}

Correct approach:

In root route file only:
import globalStyles from '~/styles/global.css';

export function links() {
return [{ rel: 'stylesheet', href: globalStyles }];
}

Root cause:

Not separating global and route-specific CSS causes redundant downloads and caching inefficiencies.

#3 Assuming nested routes automatically share CSS without importing or exporting links().

Wrong approach:

Parent route imports CSS but child route does not export links() for its CSS.

Child route CSS is not loaded.

Correct approach:

Each nested route imports its CSS and exports links() with its CSS file.

Remix merges all links() for active routes.

Root cause:

Not realizing Remix requires explicit links() exports per route to load CSS.

Key Takeaways

CSS imports per route in Remix let you load only the styles needed for each page, improving speed and reducing wasted data.

You must import CSS files and export a links() function in each route to tell Remix which styles to load.

Global CSS should be imported once in the root route, while route-specific CSS lives in individual route files.

Remix merges CSS links from nested routes, enabling modular and scalable styling for complex apps.

Proper use of CSS imports per route prevents flashes of unstyled content and leverages browser caching for better performance.