The CSS Preprocessor Revolution

Are CSS Preprocessors like Sass and 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 technique is right for you.

But first, a little introduction…

Back in the old days of web programming, CSS was 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 to use 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.  CSS3 Technology "What is he, sandwich crazy?"  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 and 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 thereof) to set up a complier application to get CSS Processor 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 and trained on how to use it
As you can see, there is definitely a learning curve when moving over to CSS Preprocessors. For me personally, after dabbling using both Less and Sass, I must admit, the good outweighed 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!!!” css-preprocessors

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
  • 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 let’s 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:

About the author: John Velasco

As a Senior Front End Developer for R2i, JV creates fully functional themes for various content management systems including DNN, Drupal and WordPress. He has a knack for both web design and development which allows him to quickly understand what can actually work on a website rather than just look cool. JV is also an enthusiastic volleyball player and thanks to his young and busy children he is always up to speed on the most current pop songs and dance moves.

Stay in the loop

Join over 52,000 marketers in staying up-to-date on the latest industry and R2i news.
arc contact image arc contact image

Ready to drive results?

Contact us today to learn how you can create and evolve digital solutions that connect customer experiences for driving unprecedented impact.

Contact Us