Style guides are a documented UI library that contains all the site’s components and styles for that particular website alongside explanations of when it is appropriate to use each one. The closest comparison we can draw to them is brand guidelines that branding companies produce for their clients.

Style guide driven development

This is the practice of using the style guide as the cornerstone for all front-end development tasks.

Therefore it’s extremely helpful to explain these components and styles as well as providing a guide towards any future development. They make it clear, to whoever and at any point in the future, what is acceptable making them particularly helpful for new, or even existing, developers who don’t have a full knowledge of how the website was build.

The added benefit of these are that they can also act as a deliverable.

It’s important that style guides are regularly maintained; once your style guide falls out of sync with your website it has lost its purpose. And it’s much more likely that the designers and developers will just ignore it as they can’t be sure of the accuracy of any of the components.

It requires meticulousness on the part of everyone to manually keep it up to date but there are some clear advantages to doing so.

Advantages

I attended a talk by Ian Feather from Lonely Planet at Hey!Stac in March 2014 in Leeds where he introduced their style guide named “Rizzo”. He stressed a number of important benefits for the Lonely Planet team which can be said for any team maintaining a large scale site:

  • Share components across the platform
  • Low risk, highly reusable
  • Highly testable as all components are in isolation
  • Much fewer bugs
  • Development and iterations are done in a component scope, not in a specific project
  • Total visual consistency

To extend on the above benefits there are also:

  • Easier collaboration for teams
  • Less redundant CSS thereby improving performance
  • Quicker development of any new templates

Conclusion

The benefits of using style guides as a key element for all front-end development is undoubted. We have begun to see real differences when style guides are in place for some of our sites.

That’s why we are committed to creating style guides for all our new projects irrespective of whether the client requires them or not. We see them as a key component for both the design and development stages.