Develop your styleguides with code

I've recently read a lovely post by Mark Boulton where he touches on our current fascination with styleguides, pattern libraries and primers.

I'd like to give my take on it.

I'm just going to ratify what I often say and that is I'm not a designer. I just can't do it as good as other people so I don't.

I love HTML, CSS and JS (kinda) and (blowing my own trumpet) I'm pretty good at it. 

Frickin' love styleguides

Or pattern libraries, or pattern primers. They help me code more effeciently in that object orientated kind of way. I don't mean I need a .psd file of 'all the things'.

How I approach creating a coded styleguide is pretty basic.

  1. print out 'pages' in grayscale
  2. attach tracing paper
  3. make pretty boxes
  4. define naming convention
  5. start coding
  6. re-iterate
  7. re-iterate

This stops me from duplicating code and allows me to check changes 'globally'.

Be appropriate

I think styleguides as I seem them in web design are for the developer more than the designer. I feel the designer should be thinking about the 'bigger picture' in fixing the problem for their client.

The developer should be making their best effor in coding it as leanly, cleanly as possible. To get that you should really be trying to make a pattern library or styleguide with your code.