Code Gino

Styling Remix using Vanilla CSS

How to style a Remix app using Plain CSS

December 1st, 2021

coloring pencils

Table of Contents

TL;DR: Source and Demo

Link to the source code

Here's a live demo

Introduction

In my last blog post, I discussed how to perform a CRUD operation in a Remix app. In this blog post, I will discuss how to style a Remix app using only plain CSS.


Why to use plain CSS?

According to the official documentation

In general, stylesheets added to the page with <link> tend to provide the best user experience:

  • The URL is cacheable in browsers and CDNs
  • The URL can be shared across pages in the app
  • The stylesheet can be loaded in parallel with the JavaScript bundles
  • Remix can prefetch CSS assets when the user is about to visit a page with <Link rel="prefetch">.
  • Changes to components don't break the cache for the styles
  • Changes to the styles don't break the cache for the JavaScript

Cleaning up styles from boilerplate 


Global Styling 

Recreate the app/styles/global.css file
Some CSS defaults I copied from the official documentation with some adjustments.

We'll modify app/root.tsx to import the global stylesheet; then, export the style in a links function.
After Adding the links function, nothing changes in the app. If we check the elements inspector, there is no link tag inside the <head> tag.
GIF

Add Links to head
Since Remix will only do what we tell it to do, we need to inform it to render the links we exported in our pages using the Links compnent.
The changes above will yield to:
GIF

TRIVIA: We can technically put <Links/ > anywhere inside the html tag; however, here's a reason why you should not do it.

Styling a Route 
For now, we're not aiming to get the best design award; we'll just apply some styles for the sake of making it look different.
Create the /words route styles
Add class name definition inside the component
export the links function
The changes above will yield to:
GIF
NOTE: every child route of /words will inherit the styles exported in app/routes/words.tsx

Styling a child Route 
Since both our /add and /edit/$id routes use a form, let's create a shared css file.
I'm too lazy to think of a great design. Let's simply add a border.

Now, let's expose the style by exporting it in our links function.
Here's the result:
GIF
After clicking the Add new word button, the word form will be styled as expected.
However, since the Add new word is inside a form as well, that form will also have a border.

A straightforward way to fix this is to improve the specificity of the word form by adding a class name.
After adding the class name, our word form styles won't leak to other form elements.
GIF

Sibling Routes Styling 
I'm adding a temporary background color to demonstrate how sibling routes styling behave.
GIF
After navigating from /add to /edit/$id, the word form styling is removed in the head; The reason why styles were not applied to the /edit/$id form.
The reason is simple; sibling routes do not share styles with other sibling routes. 

To fix the issue, we need to apply similar change to app/routes/words/edit.$id.tsx
Now it's working as expected. There's no magic or whatever, just pure JavaScript doing its thing.
GIF

Styling a reusable component 
Revert changes in app/styles/words/shared.css, app/routes/words/add.tsx, and , app/routes/words/edit.$id.tsx
We were able to share styles between sibling routes. However, this is not the right approach for this app.
The change we made was specific to a form and not a page, so we'll make the changes in the word form component.

Create a new folder word-form under app/components
Create the word form styles
Rename WordForm.tsx to index.tsx and move it to app/components/word-form
Export the declaration of our links magic function
Uh oh! The styles are not applied to the word form component. Now, we only have 2 link tag in the head
GIF
It seems the magical behavior of export const links only applied to routes
To fix the issue, we need to propagate the styles to a route
Apply the same thing in app/routes/words/edit.$id.tsx
The changes above will yield to:
GIF

Styling custom basic HTML Element 
Q: So how do we style a custom basic HTML element using CSS?
A: The same as for word form. Although, we need to propagate more until the reference reaches a route.
Custom Button
Other custom elements
There is nothing fancy for other elements, so you can view the sources here for input, select, and textarea.

Here is how we can propagate the components used in the word form to the routes
New Word Form Component
After replacing the default html elements with our custom ones, our word form will look like this:
The changes above will yield to:
GIF

Dark Mode 
There are many ways to implement dark mode.
This example will use prefers-color-scheme to update the CSS variables when a media query is satisfied.

Create app/styles/dark.css file with the following content:
Update app/root.tsx file with the following content:
The changes above will yield to:
GIF


Responsive Layout
We'll use the same approach in the dark mode example to change the layout depending on the result of a media query.

Create sm-words
Use in app/routes/words.tsx
The changes above will yield to:
GIF

Conclusion 
Styling Remix using Vanilla CSS is a fun exercise for me.
I was able to review concepts that I almost forgot due to the convenience of using third-party libraries.
I have fine-grain control over the styling of my routes and components, and I know that I only ship styles that will be used.
Less code to transmit to the Network means faster load times.
However, I'm not a fan of working in vanilla CSS, which is why in this project's next iteration, I will be integrating either Tailwind or Emotion.
What's next?