[Gatsby Themes] What is the Best Styling Implementation?

Date Created
Apr 21, 2022 07:28 PM
Date Published
I’m feeling inspired by our bloated bootstrap Sass-based bundle at work. It’s a feeling of frustration that has been lingering - because the answer isn’t easy.
What are our options for moving forward? Where did the architecture go wrong? What actually is the best means of inheriting, overwriting, and purging styles from a parent theme?

What are the options?

When you start out on the journey of building a theme or a “base” in our scenario, it can be a struggle to decide what route to take.
  1. Global CSS
  1. CSS Modules & Sass Modules
  1. Post-processors (Less and Sass)
  1. CSS in JS

Let’s get setup

There’s nothing like a fresh repo to really test things. Here’s a repo with the following structure:
src/ --

The results