CSS Preprocessors and brain rot

Seeing this tweet today triggered me to write this post, which I've been meaning to write for a couple of weeks:

I've only started using Sass in the last few months. I resisted it for a long time, because I felt like my job was hand-writing pure CSS and that hand-writing would always be the best way. Perhaps a little part of me felt like a manual labourer at threat of being made redundant by automation.

Anyway, I'm a happy Sass user now1; my stylesheets are getting written faster and are easier to maintain, but the generated CSS is not of worse quality. I think the key to this is understanding what each Sass feature is actually doing and thinking about what impact it has on the output as you work, as opposed to just doing what's easiest/shortest to write2. I think it's also a good exercise to regularly look at the generated CSS and see if there's anything there you wouldn't have written yourself.

Using Sass certainly doesn't have to mean using all of Sass. For the project I'm working on right now, I use @import for modulation, variables for a few oft-used values, sensible nesting3, and a handful of mixins (mostly for prefixed properties). I almost never use @extend and to date haven't touched any of the more advanced features like conditionals or loops.

Like any tool, Sass (or LESS or whatever) should be used with care and restraint, but I think whether or not it rots your brain depends on your attitude. If you start using Sass and think "Great — I'll never need to write CSS again!" then your brain is probably doomed, but if you only use what you need and be mindful of the output it can be really beneficial.

Finally, I'd also say that if you're still learning CSS, jumping into Sass is probably a bad move. Master the fundamentals of CSS first and then start using Sass to make you more efficient.

  1. Not all the time, though — for smaller projects like one-page sites I tend to go without it. Writing in plain CSS some of the time will not do your brain any harm, and will highlight the areas Sass can help you in. 
  2. For example, if you overdo it with nesting and mixins in particular, your SCSS files might look tidy and concise but your generated CSS could be a bloated monstrosity. 
  3. A good rule of thumb: any more than one level deep and you're probably doing it wrong