A Beginner’s Guide to CSS/HTML Preprocessors

Preprocessor may not be the most common word in your vocabulary, but if you’re a developer, it’s a good one to know.

The concept of a preprocessor can be intriguing to some and confusing to others, and while some coders swear by them, others have done their best to avoid using them at all costs.

But if you fall in the latter category, you may be missing out on a great tool that could really simplify your life. Here’s why…

[ Content upgrade with ID = 280 not found ]

What Are Preprocessors?

Preprocessors are programs that take one type of data and convert it to another type of data, usually HTML or CSS.

preprocessor-300x297

CSS preprocessors in particular are written for the sole purpose of adding new features without breaking browser compatibility.

There are plenty of reasons why this would be helpful. Chris Loos over at Urban Insights names a few:

  • It adds the stuff that should have been in CSS in the first place
  • It will make your CSS “DRY” (Don’t Repeat Yourself)
  • It will save you time
  • It will make your code easier to maintain
  • It will make your CSS more organized

If that sounds like something you want, then you’re primed to use a preprocessor. The next step is figuring out exactly which one to use.

CSS preprocessors come in several varieties, with LESS and SASS among the most popular. If you want to dive into HTML, you’re probably choosing between HAML and Jade.

So how do you choose?

Here is a breakdown of the top options for both CSS and HTML.

CSS Preprocessors

For the most part, the choice of preprocessor falls to personal preference, but there are a few pros and cons for each option.

sass-less-cover

SASS

SASS stands for Syntactically Awesome Style Sheets and was originally designed and created by Hampton Catlin.

SASS allows you to dynamically manipulate CSS using variables, mixins, inheritance, and nesting rules. It essentially helps you write less code and speed up your workflow. Many popular frameworks are built with SASS.

It has two syntaxes:

  • SCSS, which stands for “Sassy CSS”
  • Traditional (indented) SASS

Why use SASS? For one, you should use SASS if you love working with Ruby. You might also like using it if you prefer an older style of syntax and hate curly brackets and semicolons, as SASS uses indentations to delimit blocks of style and line breaks instead of semicolons to separate statements.

LESS

Written in JavaScript, LESS also allows you to extend CSS with dynamic behaviors, but their documentation is more designer friendly and the syntax is newer (no line breaks or indentation). Frameworks like Bootstrap are using LESS to take advantage of its dynamic features.

Why use LESS? If you prefer working in JavaScript (many devs find it less tedious to learn) and you’re more familiar with the newer style of syntaxes, you may prefer LESS as your preprocessor of choice.

If you’re still not sure which to use between the two, the folks over at CSS Tricks have a comparison article, found here.

an-intro-to-css-preprocessors-nashville-marketing1

Source: No Sleep for Sheep

Other Options

With CSS preprocessors, you have more choices than just SASS or LESS. If you’re picky, you also have Stylus – another popular option – and a few others to choose from like CSS-Crush, Myth, and Rework.

  • StylusSimilar to LESS, Stylus is written in JavaScript (node.js) but features the indented syntax and regular CSS style of SASS, giving you the best of both worlds.
  • CSS-Crush – Another great option, this preprocessor is written in PHP with classic syntax.
  • Myth – Myth is a new CSS preprocessor that uses natural CSS syntax and acts as sort of a CSS polyfill for future standards.
  • Rework – Rework is a CSS preprocessor written in JavaScript that may be used with node.js or in the browser.

If you’re looking for more obscure options, you can try any of the following:

  • Clay – A CSS preprocessor created using Haskell
  • DtCSS – A PHP script that parses DtCSS syntax into CSS
  • Switch CSS: A CSS preprocessor that runs on Apache

HTML Preprocessors

If you prefer to leave CSS alone, you can also use preprocessors with HTML. While there are fewer options to choose from, the choices available are still helpful in getting your coding done faster.

Haml

03-haml-ruby-homepage-gem

Haml, also known as HTML abstraction markup language, is a language designed to help you create beautiful (and functioning) markups. Some coders love it, others hate it. Again, it’s about personal preference.

It works by turning code written in Haml into HTML. It promotes DRY coding and is highly structured, making it perfect for coders who want a little more formatting. Haml does require Ruby to be compiled to HTML, so the first step to using it is to ensure that Ruby is installed

Why use Haml? If you’re okay working with Ruby and you want an easy-to-read, easy-to-learn tool, Haml is the perfect choice. It also borrows some CSS syntax, so if you’re more familiar with CSS but you still want to create markups, it can help with that.

Jade

javascript-templ

Jade is another JavaScript language for creating HTML markups, and has a number of advantages of using plain HTML.

A few of the basic features include adding simple tags, adding attributes to those tags, and creating blocks of text.

The only downside is that browsers won’t render Jade directly, though there are different tools available for different platforms that can preprocess Jade to HTML, including:

Why use Jade? If you need a simple way to do mockups and you’ve been using regular HTML up to this point (and don’t want to bother learning Ruby), Jade is a good choice.

[ Content upgrade with ID = 280 not found ]

Final Thoughts

While you don’t absolutely need to use preprocessors to compile your code, they certainly can help move thing along faster.

Preprocessors are designed to help you create structured, organized code that is easier to maintain and will save you time in the long run, which is helpful for every coder.

If you’re a fan of CSS, check out a few of the top options, like SASS, LESS, or even Stylus. If you’re more into HTML, there are a couple options that can help you out, including Haml and Jade.

If you’re having trouble choosing between them, try a few out and see how they work for you. Using a preprocessor is all about convenience, so you get to decide which one works best for you.

Leave a Reply