Example CSS Style Guide - Unit Testing for CSS?
Posted by Dan Eastwell
A quick example of a CSS style guide - I've been reading about unit testing for jQuery and wonder if an analagous approach could be used on a CSS system.
Probably not, but a style guide featuring every type of box, unit, module and typographic style on the site can quickly allow you to not only see if any changes you make have knock-on or regression errors, but allow you to see what your styles imply.
What do I mean? Well, if you have a particular form style, a style guide should have all form elements shown, even if they appear nowhere on your site - eventually, they will.
If you have a module style, what will it look like at different widths, and in combination with other similar boxes (even if you're building a fluid layout)? A style guide will help you find out and troubleshoot.
I've written about CSS systems analysis, and am happy to find a kindred spirit in Natalie Downe in her article, which covers not only CSS systems analysis, but also the concept of css style guides in any documentation handover.
This is a great idea. It solves another problem that I’ve encountered when the CSS becomes unwieldy. Refactoring
I find a major problem is legacy CSS files and CSS rules that no one’s sure exactly where (if at all) they are used.
By making designers only use styles that have been placed in the Style Guide, you have more freedom to change the CSS without worrying about breaking someone else’s design. If it breaks, then they were not following it.