Styling Remix using Vanilla CSS

How to style a Remix app using Plain CSS

Wednesday, December 1, 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?