Styling

The web

HTML, CSS, and JavaScript. These are the foundational technologies upon which everything else on the web is based. They work together to create the excellent user experiences our users expect in web applications today.

To get CSS loaded into your web application, there are a few options, but the best is to load a stylesheet file (in a .css file extension) via a special HTML tag called <link>.

<link rel="stylesheet" href="styles.css" />

The link tag is an element that establishes a relationship between the HTML document and an external resource. In this case, the rel attribute is set to stylesheet and the href attribute is set to styles.css. This tells the browser to load the CSS from the styles.css file. (Presumably the same server that sent the HTML document is prepared to serve the CSS file as well).

The link tag can also be used to link to other types of resources like favicons:

<link rel="icon" type="image/svg+xml" href="/favicon.svg" />

This tells the browser to load the favicon for the site from the favicon.svg file.

And beyond that, link can be used for non-stylistic resources as well, like telling the browser to prefetch some data, preload a stylesheet, or preload a JS module:

<link rel="prefetch" href="/some-resource" as="fetch" />
<link rel="preload" href="/some-file.css" as="style" />
<link rel="modulepreload" href="/some-file.js" />

The <link> element is an extremely powerful configuration mechanism for your application. 📜 Read more about it on MDN. 🦉 Interestingly, there's also a related Link header which you may find useful.

In Remix

Remix embraces the web platform API for loading stylesheets by exposing a special convention for routes to define link elements that should be on the page when the route is active. We'll talk about routing in the next exercise, but it's important to understand for now that each file in the app/routes directory of a Remix app is a route which can define a set of link elements. Also, you should know that the app/root.tsx file is the root route of your entire application and will be rendered on every page.

Additionally, Remix has a special way to colocate your CSS stylesheets within your application allowing you to import a .css file. We'll explain these methods further in the exercise steps, but here are some of the built-in supported features:

Specifying a default import (like import stylesheetUrl from './styles.css') will copy the CSS file to your public directory allowing you to link to the copied file.
When properly configured import './styles.css' will load the CSS file and add it to a special stylesheet you can link.
When properly configured import './styles.module.css' will load the CSS file as a CSS Module and give you an object of class names you can apply when you've loaded the special CSS file.
If a postcss.config.js file is present in your application, Remix will automatically run your CSS through PostCSS. If none is present, but a tailwind.config.js is found, Remix will run your CSS through Tailwind.
When properly configured, you can even use vanilla-extract to define your styles in a .css.ts file.

We're going to explore most of these approaches to style a web application. In our application, most of our styling is done through Tailwind with some regular stylesheets and CSS Modules sprinkled in.

A note about CSS-in-JS: Remix does support typical CSS-in-JS libraries, but recommends tools that expose a CSS file for linking. It's just a better user experience. Tailwind especially is great because the CSS file never grows very big regardless of how large your application grows.

📜 Remix Docs: Styling Guide