March 19, 2013

Front End Preprocessors

Recently, I gave a presentation on front end preprocessors dealing with myself and my team’s workflow process. I was happy to find out that most people knew what front end processing was, but I did receive a lot of questions. So below, I will go through my presentation and expand on it a little. Please note that I currently use Sass, so most of the article will be from that perpective.

Please note that this article is not a versus match, nor is it about whether or not you should use a preprocessor. It is more of a personal perspective on how I use the technology in my workflow.

CSS Failings

CSS, by all definitions, is not a perfect language. It has an intentionally simple syntax. This is great when you are learning the language, but when it comes to managing large scale websites it leads to formatting issues, large stylesheets, repetitive code and over qualified selectors.

Preprocessor Features

The benefits of leveraging a preprocessor really depends on which one you use. Less, Stylus and Sass pretty much offer the same core benefits with each having their own unique abilities. I personally use Sass. Sass has built-in conventions for various punctuation and compilers including mixins, extends and variable support. What really makes preprocessors powerful are the extensions that are built using the core as a foundation. Extensions like Compass, Bourbon and Bootstrap make my job easier everyday. And by easier, I mean mentally. Less time is spent worrying about the health of the stylesheet, or the global framework for that matter, because of the handy compiler and minification processes.

Now there are third party applications you can utilize to free yourself from the command line if you find it intimidating. I will mention some of those a bit later.

Nesting

The ability to nest selectors within each other and the ability to use variables are my two favorite features of any preprocessor. Gone are the days of which class to qualify and which to leave as a global attribute, though you still retain that option if you would like to. Below is an very simple example of how nesting works and what the compiler parses. Please note that most preprocessors let you choose how you want the code compiled.

Variables

Variables give developers the power to use a name linked to a value and the ability to change or use it at anytime. This is considered the most straightforward way to get the most “bang for your buck” out of preprocessors. Let’s take a look at a simple example:

Mathematic Operations

CSS lacks the ability to form functions. Thanks to SASS and Compass, we can create mathematical functions allowing for almost unlimited possibilites dealing with CSS and reusable logic.

Mixins

Mixins allow you to define patterns that can be reused across projects. This can be used to create the ground floor to a framework, use less object oriented css (or to make it easier), etc.

Imports and Minification Made Easy

Usually when you import an existing CSS document into the current document it requires an additional HTTP request for every stylesheet you import. This can lead to slower load times (granted it would take some major requests elsewhere). As a developer I want the site to load as quickly as possible. We can accomplish because the code is compiled by Sass and minified on the developers machine, not server side or client side.

Media Queries

The media query syntax supports stylesheets tailored for different media types. The most commonly used user agents are ‘screen’ and ‘print’. The declarations allow you to specifically target medias and utilize particular CSS for that media. Below is a simple example using media queries on default break points.

Preprocessor Misnomers

When you bring up preprocessors in conversation, it is almost as bad as bringing up religion or politics. People will obviously have their favorite one or be against using them all together. I’m not getting into that here, yet will touch on some of the myths behind using them in the everyday workflow.

It’s Difficult to Install

This is misunderstood more than I imagined. The preprocessor is installed on the developers machine only and server side. Another common knowledge rule is that preprocessors should never be used in production EVER. And installation is easy because Less and Stylus use JS and Sass uses Ruby.

Bootstrap Works with LESS Only

Bootstrap is build on LESS, but it has now been ported over and can be used with Sass and Compass. You can even find a Ruby Gem, so it installs very easily. There is one drawback though. Bootstrap for Sass is not updated as fast as it is on the LESS side.

It’s Command Line Only

The command line interface scares a lot of people. It can be intimidating if you have never used it before or you are just starting to learn it. Therein lies the beauty of this myth. So many people dislike the command line that developers make GUIs faster than every seen before. I personally don’t mind the command line because I use it everyday for Git and even I use an application for preprocessing.

Applications like CodeKit, LiveReload, Scout, Compass.app and Crunchapp are some of the commonly used ones.

I use Sass with Compass on my Mac so I utilize CodeKit. Some of my developers use PCs so they use Scout. I highly recommend that you become familiar with the Command Line. Just because it is intimidating, doesn’t mean you shouldn’t be able to use it.

What My Team Currently Uses

Below I will shed some light on my workflow and how things are done with the development team. I will keep it brief and let you do the research. Remember, I am not saying that you have to use what I use. You should make up your mind depending on what suits your needs after you learn a bit.

Sass

Sass has the ability to use either .sass or .scss files. It can also leverage Compass and extensions like Bootstrap, ZURB, Zen Grids, Stitch, etc. Sass also has more crazy features that other preprocessors like extend, if, and for statements. Did I mention Compass? With Compass you can use sprites, type and more extensions. Two good resources to learn more about Sass and Compass are The Sass Way and the Compass reference.

Coda 2

I use Panic Coda 2 everyday. I mean every single day. Before using Coda I used Dreamweaver or Sublime and my developers on PC still use Dreamweaver CS6. Coda 2 has a ton of features that other web editors have and some really cool ones that other just lack. The UI is amazing and everything, including complex projects, can be done in one window. I’m not going to go over all the features as you can view them on the Coda website.

Mamp Pro

When I turn on my computer, I have set it to automatically launch Mamp Pro. It provides a classic local server environment running Apache, MySQL, PHP and phpMyAdmin. The difference between Mamp and Mamp Pro makes it worth the money to purchase. Mamp Pro allows external access, network access (with SquidMan) and extensive virtual host configuration. You can download the free version on the MAMP website to give it a try.

CodeKit

CodeKit cuts down on local development time and makes installation a breeze. It instantly compiles and minifies Less, Sass, Stylus, Jade, Haml, Slim, Compass, etc. After it compiles, it will refresh the browser window without hitting the refresh button. And it was built by one guy, which makes paying for this stellar application hurt less. Check out more features on the CodeKit website.

Git

Git is a free and open source version control system that handles small sites like this one to large scale production sites. If you have multiple developers working on multiple projects, or technically the same project, then Git is a must. It allows you to branch a project and work on a stable copy and then merge it back into the master. You can also have multiple master backups or versions of your site readily available and leverage a staging area that can enable the developer to review the project before commiting. Go check out Git.

Conclusions

What you go with in the real world is up to you. I personally find myself utilizing the above technologies with a sprinkle of Object Oriented CSS in most of the large scale projects at work. If you learned something new out of the lengthy article, then I suggest you start messing around with preprocessors. The great thing is you can learn on your own machine because all of this is done locally.

If you are reading this I want to thank you for reading this all the way through. Or at least skimming it.