Build Powerful FrontEnd Workflows with PostCSS
CSS provides us with a very limited language toolset to build demanding modern UIs. The browser vendors constantly push the boundaries of what can be built with CSS. The standards are slow to evolve, and unable to keep up with the pace of browser development. Hence the vendors have their own implementation of APIs, properties and their syntax. With advent of mobiles, there is an ever growing array of devices and resolutions to support as well. As a result of this, standardization, organization, change management and rapid development have become huge challenges for the developers.
The modern CSS workflow addresses these issues. A CSS workflow is part process and part tools used. The CSS workflow that we espouse uses PostCSS for the tooling needs, and a blend of SMACSS, BEM and Atomic Design for the process. This workflow helps developers create robust, maintainable and cutting edge CSS.
PostCSS is a powerful, versatile, modern CSS transpiler. It has around 200 plugins and is having a great adoption rate. It automates fixing of vendor inconsistencies, hence a developer can concentrate on coding against the standard CSS APIs and properties. It also extends the language to enable variables, code reuse, inheritance, etc. It allows developers to use future CSS syntax - some of which are still in the drafts stage. It provides the freedom to define custom shorthand properties. Above all it provides freedom to only extend the ones that developers choose to.
PostCSS also helps in the coding process - to set up style guides, linters, CSS bundlers and CSS analysers. Embracing CSS Methodologies like SMACSS, BEM helps developers to maintain and reuse the CSS. The combination of these tools and process is a potent weapon in the arsenal of any frontend developer. This workflow presented is tried and tested in hundreds of artist sites built by Warner Music Group.
The session is split into three parts - Introduction, Essentials and Advanced. Each section is built on top of the foundations of the previous section. A demo and code walk through of a starter drupal theme, helps in assimilation of these concepts.
At the end of this session, attendees would be able to:
- Use PostCSS and various plugins to achieve workflow objectives
- Extend CSS as they see fit, using PostCSS
- Organize CSS code for readability, maintainability, change management, etc.