CSS imports per route in Remix - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does importing CSS per route mean in Remix?

It means loading CSS files only for the specific route or page that needs them, not globally. This helps keep styles organized and improves page load speed.

beginner

How do you add CSS imports for a route in Remix?

You export a links function from the route module that returns an array of objects with rel and href keys pointing to the CSS file.

intermediate

Why is CSS imported per route better than a global CSS file?

Because it only loads the styles needed for that page, reducing unused CSS and improving performance and maintainability.

beginner

What is the shape of the object returned by the links function in Remix?

An array of objects where each object has rel (usually 'stylesheet') and href (path to CSS file) properties.

intermediate

Can you import multiple CSS files per route in Remix?

Yes, the links function can return multiple objects to load several CSS files for a single route.

In Remix, where do you specify CSS files to load for a route?

A In the <code>links</code> export function of the route module

B In the global <code>root.jsx</code> file only

C Inside the <code>loader</code> function

D In the <code>action</code> function

The links function is the official way to tell Remix which CSS files to load for a route.

What should the rel property be set to when importing CSS in Remix?

A import

B stylesheet

C module

D script

The rel attribute must be 'stylesheet' to load CSS files properly.

Why might you prefer CSS imports per route over a single global CSS file?

A To avoid using CSS altogether

B To make CSS load slower

C To reduce unused CSS and improve page load speed

D To load all CSS on every page

Importing CSS per route helps load only needed styles, making pages faster.

Can the links function return multiple CSS files for one route?

A No, only one CSS file is allowed

B No, CSS must be global

C Yes, but only if they are inline styles

D Yes, by returning an array with multiple objects

The links function returns an array, so you can include multiple CSS files.

What happens if you forget to export the links function in a Remix route?

A No CSS files will be loaded for that route

B The app will crash

C All CSS files will load globally

D The route will not render

Without the links export, Remix won't know to load any CSS for that route.

Explain how to import CSS files per route in Remix and why this is useful.

Think about how Remix knows which CSS to load for each page.

Describe the structure and purpose of the links function in Remix routes.

This function controls CSS loading per route.