I recently updated my app todometer to be styled with pure, native CSS!

Styling todometer over time

Changing the CSS libraries in todometer has been a real reflection of CSS styling history.

When I first built it more than 9 years ago now, that first initial commit had React, Electron, and Less for CSS. Less at the time was great for what I wanted (Node-based styling with nesting). It let me use variables (like this) and nesting (like this), and got the job done with some global styles.

Eventually in 2020, I wanted more encapsulated styles, thus I wanted to use CSS Modules. Also at the time, wanting to keep my variables and nesting where I could (but also modernize), I switched to node-sass. When you look at the commits here and here, you can see the variables switching from starting with @ to $, and how I moved everything everything to their respective *.module.scss component (ultimately only keeping variables at the global level). The behaviors all stayed the same, just was more modern under the hood!

Yet another big refactor was due in 2023, when I got rid of all Sass and used plain ol’ CSS files, and postcss for transformations. node-sass had been deprecated, which really led me to reevaluating the styling stack, and CSS variables existed natively, so that was one less thing needed! That led me to where we were until earlier today, postcss-nested.

postcss-nested vs. postcss-nesting

These libraries sound almost exactly the same, but act different, and Chris Coyier talks about it a bit here. To save you a click, postcss-nested has syntax like Sass, and postcss-nesting has syntax like the CSS spec!

Given the history above, it makes sense how the transition happened here. Moving from Less to Sass to a more vanilla CSS approach, all while keeping the core of variables + nesting, is all I really wanted. The nested library back in 2023 let me keep styling almost exactly the same when I transitioned away from Sass, with the exception of variables (see the commit).

I switched in this commit today to postcss-nesting mostly to make sure that everything transitioned smoothly. It involved a laughably small change list, to just add & nesting selectors across some files.

Pure CSS, baby

The transition to fully native CSS for the entire app is possible now because CSS nesting is natively available! I probably didn’t actually need to do the “switch to postcss-nesting” step, but it felt like a good iterative one.

And since I did that iterative step, the only changes I did for a “fully pure” CSS solution was to simply delete the postcss files!

Look at that diff. So much red!! So nice!!

It’s about the journey, not the destination… but also the destination is cool

It’s really amazing to see how far we’ve come in browsers to be able to do these things without any libraries at all. Yes, I don’t have the most complex styles in the world, and yes, I’m really “only” using variables and nesting, but it’s cool that a “quality of life, nice to have” thing that I enjoyed nearly a decade ago is now a standard. Look at us go!

Anyway, you can check out the repo for todometer here, with a new version being properly cut soon!