Whilst some clients I’ve worked with haven’t fully grasped all the benefits of style guide driven development, there have been a few major advantages. The biggest benefit of this approach, is the ability to view the basic design styles in the browser as actual HTML elements far earlier in the project life cycle. Some of which includes typography and color palettes. This allows for earlier communication and discussion over design decisions, which can be easily altered at this early stage. No longer is the client left in the dark for months before the “big launch”.
Personally, I’ve found the ability to write better and more consistent HTML and CSS as a result of being able to troubleshoot cross-browser inconsistencies of elements and patterns in isolation. No longer are you trying to debug why a single element isn’t rendering correctly in a template due to some or other overriding style. It’s also forced me to work in a more modular way and look at reusing elements and patterns wherever possible. Because you’re building a system and not creating individual templates, you start to quickly see how pages are structured and what is shared and common amongst them.
The style guide I created for my website is quite basic, focusing primarily on typography. I found it helpful, even with a small number of templates, to have a consistent set of styles which I could define once and use throughout the website.
Anna Debenham recently started a super project on GitHub, which is a collection of style guide resources. She, along with a bunch of contributors have added articles, examples and tools to help you understand and create your own style guides. It’s great to see how the community contributed and worked together to consolidate all these amazing resources under one URL.
If you have any resources of your own, please feel free to contribute to the project.