CSS Preprocessors for speeding up development

When I first got into HTML programming, I barely new what CSS was. I knew it had to do with the look and feel of a web page, but that was about it. I had no idea what properties I have to write to achieve my goals, I was guessing most of them until I got the desired result. I was even writing all my CSS declarations inline (a very bad idea).

As time went by, I learned more and more properties and how to use them. I started to move all my styling into the head section of the document and external files, targeting elements using classes and ids. After a few weeks, I trained myself to only use external files for styling web pages. But I got into another “problem”; as the projects I was working on grew, so did my files. And finding your way in a big CSS file can be a bit tedious after a while. I then split the one file into multiple .css files, importing them into the main one. Little did I know this a bad practice. I was happy I had smaller files to work with. But in my defense, I used this practice for a short time, before practicing this method only on the development server. Even with this workflow it got tiring fast when I had to modify a color, a font or some other variable.

One day, while I was browsing YouTube, I came across a CSS Preprocessors intro video on YouTube. A couple of videos later, I went and installed SASS. I went with SASS just because the guy in the videos was using it. And I really liked the indented version. It looked very nice and clean. I played around for around 10 to 15 minutes before I had to go to bed (it was like 1:50 – 2:00 AM). But in the next week or so I got so used to the way it helped me and sped up my workflow.

Now I can’t conceive not using a CSS preprecessor because it’s so easy to use. And the ability to easily modify a color or a font in multiple places at once using a variable… mind blowing. On this website, I have a couple dozen custom .sass files, not to mention the Bootstrap and Font Awesome .scss source files. I combine all of them (all the ones I need) and only get 1 .css file to link in the website.