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.