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.

Practice

1. In Remix, how do you add CSS styles that apply only to a specific route?

easy

A. By exporting a links function that returns CSS links from the route file

B. By importing CSS files directly inside the component's JSX

C. By adding CSS inside a global stylesheet only

D. By using inline styles on every HTML element

Solution

1. Step 1: Understand Remix route styling

   Remix uses a special links export in route files to load CSS only for that route.

2. Step 2: Why links is preferred

   This method keeps styles scoped and improves loading by only fetching needed CSS.

3. Final Answer:

   By exporting a links function that returns CSS links from the route file -> Option A

4. Quick Check:

   Route CSS = links export [OK]

Hint: Use links export in route files for CSS [OK]

Common Mistakes:

• Importing CSS inside JSX instead of using links
• Adding all CSS globally instead of per route
• Using inline styles everywhere

2. Which of the following is the correct syntax to import a CSS file in a Remix route using the links function?

easy

A. export const links = () => [{ rel: 'stylesheet', href: './styles.css' }];

B. import './styles.css';

C. export default function links() { return ; }

D. export function links() { return { rel: 'stylesheet', href: './styles.css' }; }

Solution

1. Step 1: Identify correct links export syntax

   Remix expects links as a function returning an array of objects with rel and href.

2. Step 2: Check arrow function usage

   export const links = () => [{ rel: 'stylesheet', href: './styles.css' }]; uses an arrow function returning the correct array format, which is valid and common.

3. Final Answer:

   export const links = () => [{ rel: 'stylesheet', href: './styles.css' }]; -> Option A

4. Quick Check:

   Arrow function returning array = export const links = () => [{ rel: 'stylesheet', href: './styles.css' }]; [OK]

Hint: Use arrow function returning array of link objects [OK]

Common Mistakes:

• Using default export instead of named export
• Returning JSX instead of array
• Importing CSS directly without links function

3. Given this Remix route code, what CSS files will be loaded when visiting this route?

import styles from '~/styles/page.css';

export const links = () => [
  { rel: 'stylesheet', href: styles }
];

medium

A. No CSS will load because styles is imported incorrectly

B. The CSS file at '~/styles/page.css' will be loaded

C. All CSS files in the styles folder will load

D. Only global CSS will load, not this file

Solution

1. Step 1: Understand CSS import in Remix

   Importing CSS as styles gives the path string for the CSS file.

2. Step 2: Check links usage

   The links function returns an array with the CSS file href set to styles, so it loads that CSS file.

3. Final Answer:

   The CSS file at '~/styles/page.css' will be loaded -> Option B

4. Quick Check:

   Imported CSS path used in links = The CSS file at '~/styles/page.css' will be loaded [OK]

Hint: Imported CSS path used in links loads that file [OK]

Common Mistakes:

• Thinking import gives CSS content, not path
• Assuming all folder CSS loads automatically
• Confusing global CSS with route CSS

4. Identify the error in this Remix route CSS import code:

export function links() {
  return {
    rel: 'stylesheet',
    href: '/styles.css'
  };
}

medium

A. The href path must be relative, not absolute

B. The rel attribute should be 'style' instead of 'stylesheet'

C. The function should be named Links with uppercase L

D. The links function should return an array, not an object

Solution

1. Step 1: Check return type of links

   Remix expects links to return an array of link objects, not a single object.

2. Step 2: Validate other attributes

   The href and rel values are correct; only the return type is wrong.

3. Final Answer:

   The links function should return an array, not an object -> Option D

4. Quick Check:

   links returns array = The links function should return an array, not an object [OK]

Hint: Return an array of link objects in links [OK]

Common Mistakes:

• Returning a single object instead of array
• Incorrect function name casing
• Wrong rel attribute value

5. You want to load two CSS files, base.css and theme.css, only on a specific Remix route. How should you write the links function to achieve this?

hard

A. import base from './base.css'; import theme from './theme.css';
export function links() { return [base, theme]; }

B. export const links = () => ({
rel: 'stylesheet', href: '/base.css',
rel: 'stylesheet', href: '/theme.css'
});

C. export const links = () => [
{ rel: 'stylesheet', href: '/base.css' },
{ rel: 'stylesheet', href: '/theme.css' }
];

D. export function links() {
return <>

</>;
}

Solution

1. Step 1: Understand multiple CSS imports in links

   The links function must return an array of objects, each with rel and href.

2. Step 2: Check each option's correctness

   export const links = () => [ { rel: 'stylesheet', href: '/base.css' }, { rel: 'stylesheet', href: '/theme.css' } ]; correctly returns an array with two link objects. Others either return an object, JSX, or invalid array contents.

3. Final Answer:

   export const links = () => [ { rel: 'stylesheet', href: '/base.css' }, { rel: 'stylesheet', href: '/theme.css' } ]; -> Option C

4. Quick Check:

   Array of link objects = export const links = () => [ { rel: 'stylesheet', href: '/base.css' }, { rel: 'stylesheet', href: '/theme.css' } ]; [OK]

Hint: Return array with multiple link objects in links [OK]

Common Mistakes:

• Returning a single object with duplicate keys
• Returning JSX instead of array
• Returning array of strings instead of objects