Episode Details

In this episode, Adam talks to Alasdair Monk about how they approach CSS at Heroku, and how using a utility-based approach has kept their team happy for the last three years.

Show Notes

• Why Heroku introduced BEM to try and solve their CSS issues and why it didn't work
• How custom tooling and Ember's component system alleviated any maintainability concerns about littering the HTML with presentational classes
• Why Heroku still uses some component classes like "btn" and "input" even though they could encapsulate those in an Ember component
• Why simply introducing any sort of rigid CSS architecture wasn't enough and why switching to a utility CSS approach specifically was critical to making UI development at Heroku more maintainable
• How with a non-utility CSS approach, every new feature always seemed to require writing new CSS, no matter how many "reusable" components existed in the system
• Why the team at Heroku still loves working with this approach, even 3.5 years after introducing it
• How a utility-based approach has worked just as well for Heroku's marketing properties as it has for their application UI
• Pylon, Alasdair's experimental CSS library that provides declarative layout primitives in the form of custom HTML elements

• DigitalOcean, get your free $50 credit at do.co/fullstack
• Cloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for free

• purple3, Heroku's utility CSS library for their product UIs
• shibori3, Heroku's utility CSS library for their marketing properties
• Pylon, Alasdair's declarative CSS layout library

What is Full Stack Radio?

A podcast for developers interested in building great software products. Every episode, Adam Wathan is joined by a guest to talk about everything from product design and user experience to unit testing and system administration.