PostCSS: Life After CSS
I apologize for not posting this past week. It was my senior week. It’s easy for me to get too caught up in work, so I told myself I’d shut it down and enjoy my Senior week. Senior week only happens once and I thought it was an important time for me to enjoy/relax and reflect on my past 4 years.
PostCSS is a CSS preprocessor similar to Sass. I call PostCSS a preprocessor, but I’ve seen it referred to as a postprocessor before. PostCSS takes a different slightly approach to processing CSS than tools like Sass or Less, so people have been inclined to give it a new name. Last time I checked the PostCSS team had simply settled on calling it a processor. Naming aside, PostCSS was born out of Andrey Sitnik’s rework-vendor project. (After several iterations rework-vendor would eventually become PostCSS’s most popular plugin, autoprefixer.) The goal of rework-vendors is to add and remove all the necessary and unnecessary vendor prefixes. For example while it may be tempting to simply write display: flex; this will likely result in cross-browser support errors. The proper way to assign display: flex, to include the highest level of support, is like so:
CSS in general has a lot of strange intricacies, like display: flex, that often make it a difficult language to develop with. Hence the wealth of CSS development tools. When researching the topic I found this tweet:
The tweet above illustrates how CSS, more so than most languages, can be frustrating. There is a lot to remember; which leads to stackoverflow; which leads to copy and paste; which leads to impossible to maintain code; which leads to anger; which leads to a failing marriage; which leads to divorce; which leads to being homeless. You don’t want to be homeless do you? In order to save us all from CSS-stration Andrey Stinick kept working on rework-vendors. At a certain point he realized that his methodology for processing CSS could have broader implications. That’s when he decided to work on PostCSS
PostCSS was built off the ideas Stinick developer when working on rework-vendors. PostCSS aims to be as light as possible. This is what PostCSS does: is parses the CSS code, generates an object tree, adds a few functions to interact with said tree, and includes stringifier to export the object tree as CSS. Right out of the box PostCSS has no actual utility. It doesn’t become useful until the plugins are added. PostCSS centers everything around plugins. Developers are required to write/implement their own plugins. With these plugins developers are able to simulate all the features of Sass or less and then some. This hyper modularity allows PostCSS to be extremely fast and lightweight.
PostCSS was released in 2013 and after several years there’s now a mature library of plugins to choose from. Postcss-nested supports Sass-like nesting. Postcss-mixins adds mixins support. postcss-extend allows developers to extend selectors. Precss even combines all the previously mentioned plugins plus 12 more to create a Sass-like setup and go environment.
With PostCSS, developers are now directly connected to the CSS parsing process; this enables developers to write plugins that weren’t possible before. Autoprefixer is the quintessential example for a PostCSS plugin. Autoprefxer is the new version of Stinick’s original project rework-vendors; It will auto-magically add all the important vendor prefixes for you and even remove the unnecessary ones. The developer isn’t required to alter their code in anyway for autoprefixer to take affect making “junior-developer-resilient.” Before autoprefixer the most common solution was to use a tool like compass, but compass is only a library of mixins. Compass still requires the developers to know where to implement a mixin. One of my favorite PostCSS plugins is postcss-colorblind. Postcss-colorblind parses through all your CSS code and changes any color that would be difficult for someone with color blindness to see. This instantly opens your website up to being more accessible to the 4.5% of the population who are color blind. Air-force pilot rejects rejoice!
The best part about PostCSS is that all the plugins are written in JavaScript making them accessible to a large community of developers. The plugins often tend to be extremely small too (and therefore easy to write); for example: postcss-colorblind is approximately 88 lines of code. PostCSS is one of my favorite software tools. It’s so simple, but it solves a real issue. I highly recommend giving PostCSS a shot, it can even be used as a drop in replace for your SCSS compiler with postcss-scss, and I’m sure plugins exist for other preprocessors. Even Mark Otto from the Bootstrap project is excited about PostCSS:
Interesting links
