Full Stack Radio
Trailer
Bonus
Episode 128
Season 1
128: Alasdair Monk - Scaling CSS at Heroku with Utility Classes
Topics include:
- 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
Sponsors:
Links:
- 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