Coding is hard, and CSS should be easy, right?
There’s so much to learn and so much to practice every day, and when you just started learning the basics of web development, the easiest thing to do when it comes to front-end styling is writing plain and simple CSS.
The smack in the face happens when you stumble upon a project that uses a CSS preprocessor like SASS or LESS, and your world of certainty and confidence starts to crumble.
It can feel like a waste of time and energy setting up a preprocessor for the first time.
Your SASS file doesn’t work out of the box like regular CSS, and in order to make it readable for the browser, you have to learn and set up something like Gulp or Webpack, which add another extra layer of complexity to your project you really wish you hadn’t.
This is the very first roadblock, and probably the main reason why junior developers give up. Using a compiler is hard and convoluted, but, if you stop for a second and step back, this is actually a non-problem.
Just by doing a simple Google search, you’ll be able to find plenty of prepackaged resources and solutions that you can add to your project folder in order to automatically deal with your SASS bundling. You don’t actually need to understand Gulp or Webpack in order to use them. Plenty of ready to use solutions are available online, and the setup time is really minor.
Many of my students, and many of you guys watching my videos as well asked this same exact question when first encountering a CSS preprocessed file.
“Why should I use SASS/LESS if I can have the same exact results in plain CSS, without the necessity of wasting my time in compiling and bundling my source code? That’s too much overhead!â€
This is a legit question, and you shouldn’t feel stupid or inadequate in asking it or thinking about it, everyone has this doubts sooner or later.
The short answer is “Because it’s betterâ€, but I’m sure this answer won’t convince you at all, so, let’s dive a little bit deeper into the reasons why you should be using, or learning, a CSS preprocessor.
Writing less CSS code
After the initial struggle of figuring out how to integrate a compiler or bundler in your project, there’s nothing much left to do other than writing way less code to achieve way better results.
With a CSS preprocessor, you’ll have the ability to easily create reusable components, make your styling more modular, use mixing, foreach loops, dynamically import external resources, define variables, extend code portions, and so on.
Some of these things can be also done in regular CSS, but the amount of code that you end up writing is way less with a preprocessor.
Look at this code snippet for example:
SASS @each loop
CSS is painful
In SASS, I can define some variables inside an array, and with a foreach loop, quickly generate a modular color component.
I can definitely do the same in CSS, but I have to manually write those variations one by one, and if in a later moment I decide to add or remove a variation, with SASS it’s just a matter of writing another variable, while in CSS, I have to duplicate the same snippet of code a lot of times.
Reusable CSS library
How many times you started a project and you wanted to reuse some CSS you wrote a while ago, but to make it work you had to painfully edit all those pixel values, color variations, and classes declarations, to adapt it for the new project?
With a preprocessor, you can have your starter toolkit relying on 1 single file that automatically adapts to a simple variable change.
This level of modularity and scalability cannot be achieved in regular CSS with the same elegance and speed used in a preprocessor.
Future proofing your code and your career
If you want to be taken seriously as a developer and have recruiter considering your portfolio, you need to demonstrate your ability to understand and adopt modern technologies and techniques.
Unfortunately, in our very particular field, is really hard to keep up and be always up to date considering a new framework gets released once every 3 months, but, nonetheless, you shouldn’t be so out of the loop that you can’t understand the benefits of a CSS preprocessor, or not even be able to implement it.
These preprocessors have been around since 2010, there’s not a single excuse for you to not know how to use at least one of them.
And even if your projects are amazingly written and organized in plain CSS, chances are that you’re gonna stumble upon a project you’ll have to maintain that was previously built with SASS or LESS, and that’s gonna be painful.
So, in my opinion, these are the most obvious reasons why you should use a CSS Preprocessor. If you don’t know what to do or how to do it, I’m here to help you out.
Check out my Alecaddd Crash Course on SASS on my channel to boost your skills and start coding something amazing.
Happy Coding.