Style Guides: Why Bother?

Style Guides: Why Bother?

Talk given at SmashingConf Whistler, December 10, 2014
Style guides often seem like a lot of work, why would you want to bother doing one? A style guide can increase performance of your site, the quickness with which you can add on new features and sections to your site or application, and it's great documentation for new team members to get up-to-speed. In this session we'll take a look at the benefits of creating and maintaining a style guide. In addition, we'll take a look at a few different case studies of style guides; how to create them, how they were useful in cutting code, and how they were used to do design changes quickly.


Susan Robertson

December 10, 2014


  1. 2.

    What I’ll cover ✴ What? ✴ Why? ✴ How I’ve

    incorporated them ✴ Different guides I’ve created ✴ Maintaining once you’ve got ‘em ✴ Resources
  2. 7.

    How I define style guide: ✴ Not a brand guideline

    ✴ A living document ✴ Made with the site/application code
  3. 8.

    But wait, what’s a Pattern Library? ✴Style guide can be

    more broad ✴Pattern library is more fully formed framework
  4. 9.

    Different Guides ✴Branding ✴Design language ✴Voice and Tone ✴Writing ✴Pattern

    Libraries ✴Code Style Guides
  5. 11.
  6. 12.

    Reference for the whole team Everyone knows what to call

    different modules. South Tees Hospital
  7. 23.


  8. 24.
  9. 29.
  10. 43.
  11. 51.

    ✴Use it to test design changes ✴Make it part of

    your workflow ✴Use it for feature development Other possibilities:
  12. 52.
  13. 58.

    Thank you @susanjrobertson Thanks to Flickr users who share

    their photos under Creative Commons license. Special thanks to Ethan Marcotte, Jason Grigsby, Anna Debenham, Tim Kadlec, Matthew Oliphant, Kitt Hodsden, Jonathan Snook, and Livia Labate for their invaluable feedback and support as I wrote this talk.