Adam Wathan

Technika

128: Alasdair Monk - Scaling CSS at Heroku with Utility Classes

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.

Topics include:<ul>
<li>Why Heroku introduced BEM to try and solve their CSS issues and why it didn't work</li>
<li>How custom tooling and Ember's component system alleviated any maintainability concerns about littering the HTML with presentational classes</li>
<li>Why Heroku still uses some component classes like "btn" and "input" even though they could encapsulate those in an Ember component</li>
<li>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</li>
<li>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</li>
<li>Why the team at Heroku still loves working with this approach, even 3.5 years after introducing it</li>
<li>How a utility-based approach has worked just as well for Heroku's marketing properties as it has for their application UI</li>
<li>Pylon, Alasdair's experimental CSS library that provides declarative layout primitives in the form of custom HTML elements</li>
</ul>Sponsors:<ul>
<li>
<a href="https://www.digitalocean.com/?refcode=74a1c5d63dac&utm_source=fullstackradio&utm_medium=podcast&utm_campaign=DO_Dev_Signup_Cold_FullStackRadio_Podcast">DigitalOcean</a>, get your free $50 credit at <a href="https://do.co/fullstack">do.co/fullstack</a>
</li>
<li>
<a href="https://cloudinary.com/users/register/free?utm_source=fullstackradio&utm_medium=Sponsored_Podcast&utm_content=fullstackradio_PodCast">Cloudinary</a>, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for free</li>
</ul>Links:<ul>
<li>
<a href="https://design.herokai.com/purple3">purple3</a>, Heroku's utility CSS library for their product UIs</li>
<li>
<a href="https://design.herokai.com/shibori3">shibori3</a>, Heroku's utility CSS library for their marketing properties</li>
<li>
<a href="https://almonk.github.io/pylon/">Pylon</a>, Alasdair's declarative CSS layout library</li>
</ul>

Topics include:<ul><li>Why Heroku introduced BEM to try and solve their CSS issues and why it didn't work</li><li>How custom tooling and Ember's component system alleviated any maintainability concerns about littering the HTML with presentational classes</li><li>Why Heroku still uses some component classes like "btn" and "input" even though they could encapsulate those in an Ember component</li><li>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</li><li>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</li><li>Why the team at Heroku still loves working with this approach, even 3.5 years after introducing it</li><li>How a utility-based approach has worked just as well for Heroku's marketing properties as it has for their application UI</li><li>Pylon, Alasdair's experimental CSS library that provides declarative layout primitives in the form of custom HTML elements</li></ul>Sponsors:<ul><li><a href="https://www.digitalocean.com/?refcode=74a1c5d63dac&utm_source=fullstackradio&utm_medium=podcast&utm_campaign=DO_Dev_Signup_Cold_FullStackRadio_Podcast">DigitalOcean</a>, get your free $50 credit at <a href="https://do.co/fullstack">do.co/fullstack</a></li><li><a href="https://cloudinary.com/users/register/free?utm_source=fullstackradio&utm_medium=Sponsored_Podcast&utm_content=fullstackradio_PodCast">Cloudinary</a>, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for free</li></ul>Links:<ul><li><a href="https://design.herokai.com/purple3">purple3</a>, Heroku's utility CSS library for their product UIs</li><li><a href="https://design.herokai.com/shibori3">shibori3</a>, Heroku's utility CSS library for their marketing properties</li><li><a href="https://almonk.github.io/pylon/">Pylon</a>, Alasdair's declarative CSS layout library</li></ul>

Aplikace Youradio Talk

128: Alasdair Monk - Scaling CSS at Heroku with Utility Classes

Poslechněte si podcast