Sep 27

The CSS Preprocessor Revolution

Are CSS Preprocessors like Sass & Less a passing trend or are these new techniques here to stay? After working on a few projects using both languages, I’ve come up with some pros and cons that may help you decide if this is technique is right for you.

But first, a little introduction…

Back in the old days of web programming, CSS was the practically the only method available for stylizing websites. It was simple, straightforward and provided just enough customization ability to make websites stand out. But as the years passed, browsers began supporting more and more CSS properties and the options one had on using them increased exponentially. Then along came CSS3, which was the equivalent of Vin Diesel & Co. hitting that NOS button in the middle of a street race.

coding-face

So how do we manage this wide gamut of CSS awesomeness? Enter the CSS Preprocessor, a nifty scripting language such as Sass or Less, that is similar to regular CSS syntax, but has additional extensions that enhance the workflow behind styling a website. Coupled with a compiler application, server-side compiler or JavaScript processing, you have a powerful tool for creating robust stylesheets!

Let’s Get this Party Started Already!

So you may be wondering, why aren’t CSS Preprocessors being used on every website on the Internet? The answer is simple… Like many new technologies, there are initial drawbacks that make users, designers & developers a little hesitant about switching over completely.

Cons

  • Having to break decades of old CSS programming habits
  • Learning curve for new syntax
  • Have the knowledge (or lack there of) to set up a complier application to get CSS Processors files to render into normal CSS
  • If clean code structure is not followed, the rendered CSS file can be bloated with repeated values
  • Debugging CSS Preprocessor files are more difficult due to the compressing of the files for rendering purposes
  • When working with a team of web designers, to efficiently administer your teams’ code, every member must be on board & trained on how to use it.

As you can see, there is definitely a learning curve when moving over to a CSS Preprocessors. For me personally, after dabbling using both Less & Sass, I must admit, the good outweigh the bad… by a long shot. After a few days, I went from: “WTH is CSS Preprocessors?” to “hmmm I could get use to this…” to “THIS IS THE GREATEST THING EVER!!!”

omg-face

Pros

  • Flexibility to recycle common CSS values throughout your stylesheet(s)
  • Ability to create variable based equations that adapt to whatever element you apply the code to
  • Create CSS variables, that will render automatically across all elements with that property
  • Reinforces the need to write clean, well structured CSS
  • Allows you to easily administer styles across multiple CSS files
  • You sound super nerdy (yet still cool) saying that you used a CSS Preprocessor
  • SAVES TIME

Lastly, if you’re considering giving it a shot, my suggestion is to just dive right in. Set up is simple after you figure it out once, and it’s easier to write than you think. Plus, it makes work a bit more challenging/fun at the same time. So come on! Join the revolution with me and lets make websites more amazing than ever before!

For a more in depth look into the specifics of CSS Preprocessors, check out the following useful links:

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Current day month ye@r *