CSS Modules: turning extension into composition

Sass' @extend function is one of the most powerful, surprising, controversial & subtle parts of the language. We've all seen blog posts about "what you didn't know about @extend", "why @extend is so powerful", "why you shouldn't use @extend" — seemingly every possible viewpoint has someone intelligent arguing for it. It's a confusing state of affairs, yet clearly the intent of @extend is really useful — define all your styles for a component one place, but avoid duplicating output as much as possible.

Meanwhile, our relationship to markup is changing dramatically. The rise of React brings with it a new rendering model and a whole host of new techniques for writing applications, but the new ideas around styling seem extremely limited, a long way off being ready to use day-to-day.

In my talk, I'm going to explore what happens when you put these seemingly disparate technologies together, and how that's risen to a new potential standard in CSS Modules. In particular, I will:

  • deconstruct @extend, showing how the algorithm works, and that it's the constraints of the language that cause the problems, not the idea itself
  • show some of the shortcomings of JS-based styling approaches, and the useful ideas they hint at
  • explain how the transition from static to dynamic markup marks a profound shift in our capabilities
  • tell the story of CSS Modules, from my custom Sass @extend-based DSL to a team of 6 (including the authors of Webpack & JSPM) dreaming of a future CSS specification
  • how you can use CSS Modules with Sass today, even if you're not using React
About Glen Maddern

Glen Maddern is an independent web developer from Melbourne, Australia, with a background in mathematical simulations and distributed computing. Since 2009, he’s been working exclusively on the web and most recently, almost entirely on the front-end. He believes there’s never been a more potent target for ideas than the browser and the web, and loves the incredible pace at which new ideas are emerging, and the new ways ideas can be demonstrated, shared and built upon. He helps to run CSSConf AU, tied for greatest conference in the world with SassConf.