I’ve been using Sass for a few years now, and I’ve gotten so used to using it on new projects, I never gave it a second thought. I thought it was making my life easier, but it’s caused me more hassle than it’s worth in recent weeks.
When Sass came out, it was all the hype, and as all devs know, when something new comes out, you jump on the bandwagon just because everyone is doing it and raving about it, and you get hooked in.
Why Sass?
These last few weeks, I’ve been doing a lot of work on page speed improvements in light of Google’s Core Web Vitals update. It made me question my usage of Sass – is it vital, given that vanilla CSS can do all of what I needed?
Some of the Sass features I used were:
- CSS variables – I used sass a lot to declare variables, but CSS now has the var() function, which does the same thing.
- Sass mixin’s – I have to admit, I don’t use this very much, and it’s not something I would miss.
- CSS nesting – Nesting styles made the code cleaner to look at by “grouping” styles together, but it results in a mess of styles.
Time to let go
I’ve been removing Sass from a few client projects recently, including my website, and what I’ve realised is that although Sass was quick and convenient – unjustifiably convenient – it hinders performance.
With Sass, it’s too easy to add similar styles without any thought of their impact, and this is complicated further by nesting styles. With nesting, it makes the styles much harder to dissect compared to vanilla CSS. I wasn’t thinking about structure or grouping globally; I was writing them without any thought, which is unlike me.
Whilst going through the long process of refactoring the CSS, I managed to consolidate many of the styles, thus reducing the size of the style sheet. And, splitting out the mobile styles into separate CSS files helped reduce render-blocking on devices they do not apply to.
CSS is CSS
I am a little disappointed with myself for falling into the Sass trap. CSS is CSS, and it doesn’t need pre-processing. It’s capable and powerful on its own, especially today, and it’s what the web is designed with from very early on.
We don’t need anything else. I’ve enjoyed going back to using plain CSS.