Scaling up CSS

CSS has a habit of creeping up on you. If you’re not careful, your humble stylesheet can go from a few flourishes to a giant maintenance tangle. Before you can say “12-deep nested div”, your in a world of duplication and complexity that prevents you from making timely user-interface updates.

[Medium’s]( one organisation that’s been through the growing pains of CSS and Jacob Thornton (“Fat”) has an in-depth case study we can all learn from.

Medium’s CSS is actually pretty f***ing good is the claim and it’s hard to argue with the wisdom herein. Among the improvements Medium has made since the early days:

  • Data-URI image optimisatinos
  • Isolating z-indexes into a single file (thankyou, Less variables)
  • A style style guide, incorporating not only coding conventions but patterns for naming classes and properties

It’s nice to see real-world coverage like this, and presented as the series of transformations that took it to where it is now, along with code samples. This kind of high-scale CSS refactoring is something many organisations need to be doing and a guide like this should help.

Source: Ajaxian
Scaling up CSS