Preprocessor workflow, structure, and tricks

Preprocessors are cool! They let you write less code, take shortcuts, and add a level of programability to otherwise basic tools.

But while powerful, they also can lead to bloated code, slow processing speeds, and tangled messes that confuse not only their authors but anyone who tries to read or maintain it.

How can we structure our code so it makes sense? What common conventions do experienced authors use and why? What strategies will reduce output size and keep everything DRY?

We'll briefly cover the tools themselves and how to optimize their setup. Then we'll explore higher level concepts and tactics, such as Object Oriented CSS, BEM, SMACSS, file organization, etc. Finally, we'll dig into specific examples, stories, and use cases showing how I've seen different developers solve similar and recurring problems. If we have time, we will also introduce integration with other frontend workflow tools, such as Gulp/Grunt, live reloading, style guides, and text editors.

As a freelancer, I've had the opportunity to participate in many teams with a wide variety of approaches to frontend development, picking up many tips and tricks along the way. Let me spread some of my hard-won knowledge!

This session assumes you know the basics of HTML, CSS, JS and Drupal theming. A general understanding of programming/coding will help, too, especially as we dig deeper into implementation, but is not necessary.