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.