CSS imports per route in Remix - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does Remix handle CSS imports per route?

Consider a Remix app with multiple routes. Each route imports its own CSS file. What happens when you navigate between routes?

Remix

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

A Only the CSS for the current route is loaded and applied; previous route CSS is removed.

B All CSS files from all routes are loaded once at app start and stay applied.

C CSS files are loaded but never applied to the page.

D CSS files from previous routes remain applied, causing style conflicts.

💡 Hint

Think about how Remix optimizes CSS loading for each route to avoid style conflicts.

Remix loads and applies CSS only for the active route. When you navigate, it removes CSS from the previous route to keep styles isolated and avoid conflicts.

📝 Syntax

intermediate

Correct way to export CSS links in a Remix route

Which of the following links exports correctly imports a CSS file for a Remix route?

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

B export default function links() { return [{ rel: 'stylesheet', href: '/styles/route.css' }]; }

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

D export function links() { return '/styles/route.css'; }

💡 Hint

Remix expects links to be a named export returning an array of link descriptors.

Options A and C are correct. They both export a named links function (either declaration or arrow function) returning an array of link descriptors. Option B uses default export which Remix does not recognize for links. Option D returns a string instead of an array.

🔧 Debug

advanced

Why is CSS not applying on route change in Remix?

You imported CSS in a route's links export, but when navigating to that route, styles do not apply. What is the most likely cause?

Remix

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

A Remix does not support CSS imports in <code>links</code> exports.

B The href path is missing the leading slash, so the CSS file is not found.

C The CSS file is not imported using <code>@import</code> inside a JS file.

D The CSS file must be imported with <code>import</code> statement, not via <code>links</code>.

💡 Hint

Check the URL path for the CSS file in the href attribute.

In Remix, the href path must be absolute or relative to the public folder. Missing the leading slash causes the browser to look in the wrong location, so CSS fails to load.

❓ state_output

advanced

What happens to CSS when navigating back to a previous route?

In a Remix app, you navigate from Route A to Route B, each with their own CSS imported via links. Then you navigate back to Route A. What is the state of CSS on the page?

A No CSS is applied after navigating back to Route A.

B Both Route A and Route B CSS remain applied, causing style conflicts.

C Route B's CSS is removed and Route A's CSS is re-applied, reflecting Route A's styles.

D Only Route B's CSS remains applied, Route A's CSS is lost.

💡 Hint

Think about how Remix manages CSS lifecycle per route.

Remix removes CSS from routes no longer active and applies CSS for the current route. Navigating back re-applies Route A's CSS and removes Route B's CSS.

🧠 Conceptual

expert

Why does Remix prefer CSS imports via links over global CSS imports?

Remix encourages importing CSS files in each route's links export instead of importing global CSS in a root file. What is the main advantage of this approach?

A It enables route-level CSS code splitting, improving load performance and avoiding unused styles.

B It prevents any CSS from loading until the user clicks a button.

C It disables CSS caching, ensuring styles always reload fresh.

D It forces all CSS to load at once, simplifying caching.

💡 Hint

Consider how loading only needed CSS per route affects page speed and style conflicts.

By importing CSS per route, Remix only loads styles needed for the current page. This reduces unused CSS, speeds up loading, and avoids style 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