updated: September 23rd, 2009 / Ross Johnson / 5 Comments

The case for XHTML/CSS Style Guides

I have been working for a short while on a side project that I have already found very useful, and that is to develop a tool that aids in creating what I call a “CSS Style Guide.” There may be a better name for it, but the concept is quite simple, a guide for clients or website owners who will be maintaining a website after you have delivered it to them.

Style guides typically outline when you should use a H1, H2, H3, ordered lists, tables, etc… so that everything remains consistent and unified.

The interesting part about the style guide, as I have found, is that it often brings to light the incompleteness of our work as website builders.

Why the typical website building workflow leaves holes

The web is part coding (for lack of a better word) and design. The typical web design workflow starts in visual tools that represent a given page / interface and then moves into the coding and building of the site (working with text, markup, and style sheets).

What ends up happening is markup and design is only created for the elements that show up on those pages. Typically H1 – H3 (if that) and a few other design elements such as bulleted lists.

This is not great for a website that needs to grow, and a client that needs to maintain it. There may be a few rare cases where it makes sense to move all the way down to an H5 / H6.

However unless the designer thinks ahead to design a style for all common elements that fit with in websites needs, it will not have the same uniform approach that the rest of the well planned elements have.

This becomes esspeically important on any website that is content focused or content heavy.

It is bad for the website, the client and yourself if you never bothered to design what a “block quote” looks like and a blog post ends up failing to communicate that content is in fact, a quote.

What I suggest to do about it

I have learned simply through making mistakes, “agh crap, I forgot to style that.” You could just wait until specific elements need styling and have the client ping you, but that is not ideal.

Instead I have developed a simple one page “Style Guide” that lets you load or paste in CSS styling so you can get a clear picture of how the most common elements on a page look. It is flexible so you can easily see how elements wrap and/or how they look in wide and narrow columns.

Take a look, and play around

Feel free to take a look and play around with it on my server, or download it for yourself to use, update and improve.

I had a fair amount of fun just loading other peoples stylesheets to see how they stylized each level of heading and how far in the styling they actually went.

It is free to use, alter, etc… if you can keep a credit in the head section that would be great. I really would like to get more conversation around creating a guide to how a website should be styled and have it be a deliverable to clients who need it.

5 thoughts The case for XHTML/CSS Style Guides

  1. Very cool post, and tool. I will definitely check it out. I am a big fan and user of the 960.gs grid system put out by Nathan Smith and more often than not find myself restyling something due to the reset.css or text.css.

    Thanks!

  2. thankyou for sharing the download link . About to go ahead and download the link . will give it a try and comment back.

  3. Pingback: JeremiahTolbert.com » Blog Archive » links for 2009-02-12

  4. I like this idea. I have a page of content that I usually just plop into my sites to test but this is nice a too. Would be nice to have a few fields for stylesheets so that you can test it with a reset and your global stylesheet.

  5. Pingback: Cory Holt > Patching the holes in your design before you have them

Comments are closed.