What’s the Pre to the Process?

CSS pre-processors have been gaining traction for the past several years. Sass (Syntactically Awesome Style Sheets) has been around since 2006. So, what is a CSS pre-processor? It is a dynamic stylesheet language that extends the functionality of CSS, making it compatible for all web browsers. Pre-processors extend CSS with usable features such as variables, functions, mixins, operators, interpolations, nesting, and more. Each pre-processor has its own syntax, but they’re all quite similar and fully capable of regular CSS code and syntax. The language of the pre-processor itself is not CSS, but it is interpreted or compiled into CSS.

Adding a CSS pre-processor to your design workflow is incredibly useful. Do you want more abstraction with your style sheets? Pre-processors can do that because they aren’t bound by the limitations of CSS. Do you need more maintainability and flexibility with your CSS code? Pre-processors will do exactly that, which can be vital for large and complex projects. Pre-processors make it possible to write reusable, maintainable, and extensible code in CSS. This recalls the programming adage of DRY – “Don’t Repeat Yourself.” With regular CSS, repeating the same code over and over is a given. With a pre-processor, this practice is eliminated, and productivity is increased.

CSS in the Post

Pre-processors aren’t the only thing revolutionizing style sheets. Post-processors have become an important aspect of the CSS workflow, too. One of the first known post-processors was PostCSS, which came about in 2013 (more on PostCSS later). A post-processor takes the existing CSS (after the pre-processor has compiled, of course) and applies automation and repetition to extend it even further. For example, the primary use of a post-processor is to auto-optimize the CSS to fit current browser standards. This way the developer doesn’t have to manually update the code to meet those browser standards, which is the tedious, old-fashioned way. Prefixes for newer CSS3 properties are automatically appended during post-processing. This makes it possible for the CSS to always be maintained to current browser requirements. Post-processors will manipulate CSS to your liking, such as running experimental CSS4 behaviors. Like their pre-processing counterparts, post-processors eliminate the need for repetitive code. It’s a productivity booster because it will automatically update the CSS to modern standards and refurbish the CSS according to the functionality used.

Two Birds, One Stone

So, we have pre-processors on one side and post-processors on the other. But what if we could kill two birds with one stone? Furthermore, if there’s a program that can pre-process as well as post-process CSS, do we call it a Pre-Post-Processor? That’s too many syllables! Since they can process on both sides of the CSS workflow, they are referred to as CSS processors. Also, if you find yourself discussing pre-processors and post-processors back and forth, feel free to generally refer to them as CSS processors.

Getting back to the two birds, there are several options available for those who want to do all their CSS processing from one place. PostCSS is perhaps the prime example of a tool that accomplishes that, even though their name is a bit misleading. With PostCSS, developers can run pre-processing operations on their CSS as well as post-processing routines. The most popular PostCSS plugin is AutoPrefixer, which is used to add and clear browser prefixes during post-processing. While PostCSS is certainly a viable option for the CSS workflow, the aforementioned Sass is also capable of post-processing functionality. That’s right, the most popular pre-processor can also double as a post-processor. Whether you want all your CSS processing to come from one place or you want a combination of Sass and PostCSS (or another pre/post combo), one thing is for certain – your CSS workflow will be streamlined and efficient like you’ve never seen before.

Is a CSS Processor Necessary?

The decision to bring a CSS processor into your workflow is ultimately up to you or your team. Why use one?

1. Code reusability and inheritance are very difficult to do in regular CSS. A processor makes it very easy to accomplish inheritance and have reusable code.
2. Browser specs are being updated all the time. This means that the CSS will have to be coded with browser vendor-specific properties each time the vendor updates the specs. Do you really want to recode your style sheets every time the latest properties and vendor versions are released by Chrome, Firefox, Opera, Edge, etc.?
3. If that isn't enough, there is also the helpful feature of nesting, which allows your style sheet to be organized with a visual hierarchy like HTML. This improves the readability of child selectors and decreases the scattered feel of regular CSS.

When it comes to the wide world of CSS processors, there is a lot to discover and learn. Logical Imagination offers a one-day course that provides an in-depth introduction to CSS processors. The course covers the most commonly used pre-processors such as Sass, LESS, and Stylus. It will also take a journey into the post-processing side, which includes PostCSS, Pleeease, and CSSNext. If you’d like to know more about CSS processors, sign up now!

by Debbie on 05.18.2018