Subscribe: iTunes | Stitcher | Other apps | @pushpullcast

Styleguides: Every Dev’s new BFF

Posted by on Apr 11, 2014 in Code, CSS, Making the Web

Episode 7 featured Susan Robertson where we discussed the awesomeness that are code style guides/pattern libraries. At the time I was curious about them but had not yet taken the leap. After the show, I decided to bring it up to my company in one of our process meetings. They were interested, the PM asked if it would be a time suck, and I assured everyone it would only speed things up for us. The back-end developers were especially excited by the idea of having a one page guide of all of the classes and modules that could be easily accessed when having to make updates in the future.

Not wanting to spend a whole lot of time setting a template up, I grabbed a very simple php-based style guide boilerplate, adjusted a few things to fit our needs, and got busy putting together all of the bits and pieces of the site before doing anything else.

Wow. The useful of this process was immediately apparent, as I was quickly pointing out inconsistencies and missing pieces to the designer from this early stage, rather then finding surprises down the road when any change would mean potentially updating HTML across multiple files. I could easily rename classes as I went. For instance, if I had named something to match a specific section on a page, and only later noticed that it reappeared on another template, I could give it a better, more semantic name right there in the style guide.

Screen-Shot-2014-04-11-at-12.32.38-PM

Creating the pages is now a simple copy and paste job, with some minor adjustments as I go. Suffice it to say, I’m a convert.

For more information, Susan recently wrote an article for A List Apart, go check it out.