Don't modernize your code just for the heck of it

I love CSS variables! They’re really powerful, and make things that used to require a CSS compiler like Sass native to the web (but better).

My various websites all run on a CSS boilerplate that I built before CSS variables existed. It uses Sass variables for various recurring values, and needs to be compiled into vanilla CSS.

Over the weekend, I started down the path of modernizing it to use CSS variables. About halfway through, I stopped.

For most projects, modernizing your code base “just because” is a bad idea.

I have a beautiful, easy-to-read website. It scales to various viewports. It’s fast. It’s accessible. It does its job perfectly.

Why would I risk breaking that just to make my code newer and more modern?

Rebuilding things always seems simple at first. “Oh, I’ll just swap out $color-primary with --color-primary.”

But then you find weird edge cases that don’t work. For example, you can’t use CSS variables for media query breakpoints. Or you have Sass color functions like darken($color-primary, 10%) in your code, so those need to get converted over to fixed variables, too.

After a few hours, and only halfway through my code base, I decided to stop. It wasn’t worth the effort.

I absolutely use modern approaches when building new things and when working on client sites that already have them in place. But redoing code just to make it “new”? Rarely a good idea.

Redoing legacy code to make it better? Faster? More resilient? Absolutely! That’s not what this is, though.

Upgrade code deliberately.