CSS imports per route in Remix - Step-by-Step Execution

Concept Flow - CSS imports per route

Start App

↓

User navigates to Route

↓

Route Component Loads

↓

Import CSS for Route

↓

Apply CSS Styles to DOM

↓

Render Route with Styles

↓

User navigates to another Route

↓

Unload previous CSS

↓

Import new Route CSS

↓

Apply new Styles

↓

Render new Route

↓

Repeat on navigation

When a user visits a route, Remix loads only that route's CSS, applies it, and removes previous route CSS on navigation.

Execution Sample

Remix

import styles from './route.css';

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

export default function Route() {
  return <div className="route-style">Hello Route</div>;
}

This code imports CSS only for the current route and applies it when the route renders.

Execution Table

Step	Action	CSS Loaded	DOM Style Applied	Route Rendered
1	App starts, no route loaded	None	No styles applied	None
2	User navigates to /home	home.css imported	home.css styles applied	/home route content
3	User navigates to /about	about.css imported, home.css removed	about.css styles applied	/about route content
4	User navigates to /contact	contact.css imported, about.css removed	contact.css styles applied	/contact route content
5	User navigates back to /home	home.css imported, contact.css removed	home.css styles applied	/home route content
6	User refreshes /home	home.css imported	home.css styles applied	/home route content
7	User navigates to unknown route	No CSS imported	No styles applied	404 or fallback content
8	End of trace	-	-	-

💡 Execution stops as user stops navigating or closes app.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	After Step 6	After Step 7	Final
CSS Loaded	None	home.css	about.css	contact.css	home.css	home.css	None	None
DOM Style Applied	No styles	home.css styles	about.css styles	contact.css styles	home.css styles	home.css styles	No styles	No styles
Route Rendered	None	/home	/about	/contact	/home	/home	404 page	404 page

Key Moments - 3 Insights

Why does the CSS from the previous route get removed when navigating to a new route?

Because Remix imports CSS per route, it unloads the previous route's CSS to avoid style conflicts and keep styles specific to the current page, as shown in execution_table rows 3 and 4.

What happens if a user refreshes the page on a route?

The CSS for that route is imported again and applied fresh, as seen in execution_table row 6, ensuring styles load correctly even on refresh.

Why is no CSS loaded on an unknown route?

Because there is no route-specific CSS defined for unknown routes, no CSS is imported or applied, resulting in default or fallback styles, shown in execution_table row 7.

Visual Quiz - 3 Questions

Look at the execution table, what CSS is loaded after step 4?

A about.css

B home.css

C contact.css

D No CSS loaded

💡 Hint

Check the 'CSS Loaded' column at step 4 in the execution_table.

At which step does the DOM style change from about.css styles to contact.css styles?

A Step 4

B Step 3

C Step 5

D Step 2

💡 Hint

Look at the 'DOM Style Applied' column between steps 3 and 4.

If the user navigates to /home twice in a row, what happens to the CSS imports?

A home.css is imported twice, but only applied once

B home.css is imported once and stays loaded

C home.css is imported and removed repeatedly

D No CSS is imported the second time

💡 Hint

Refer to variable_tracker for CSS Loaded at steps 2 and 6.

Concept Snapshot

In Remix, each route imports its own CSS file.
When you visit a route, Remix loads only that route's CSS.
On navigation, previous route CSS is removed to avoid conflicts.
This keeps styles specific and efficient.
Use the links() function to import CSS per route.
Refreshing a route reloads its CSS cleanly.

Full Transcript

This visual trace shows how Remix handles CSS imports per route. When the app starts, no CSS is loaded. As the user navigates to a route like /home, Remix imports home.css and applies its styles to the DOM. Navigating to another route, such as /about, causes Remix to remove home.css and import about.css instead, updating the styles accordingly. This process repeats for each route, ensuring only the current route's CSS is active. Refreshing a route reloads its CSS. Unknown routes load no CSS, showing fallback content. This approach keeps styles isolated and prevents conflicts between routes.