Keep Track of Your Styles with a Content Formatting Quick Reference Guide

One problem I regularly encounter — whether it's on my blog on one of the sites I manage at work — is how to keep track of the styles used for content formatting.

Float this image over to the right. What code do I use to do that again? What's the HTML for a blockquote … and what about one with a name attached?

On this site I always find myself referring back to old blog posts to see how I coded a particular piece of content, which quickly gets pretty tiresome.

On large sites, it becomes even harder to track all the styles you are using to format different types of content.

This makes it difficult to make sure that you reuse existing styles rather than create new, potentially duplicate ones, and to monitor the effect of altering the styling for a particular content type on other content styling.

It's not exactly practical to keep looking back through the style sheet once it gets to be hundreds of lines long.

This is why I created a content formatting quick reference guide, or markup guide, so that I can easily see what HTML I need to use to add certain types of content such as a centered image with a caption.

This quick reference also enables me to make CSS edits and easily see the impact on the formatting of my content without referring to multiple pages across my site.

And it enables me to see the impact of changing the formatting of one type of content on other content types.

For example, if I change the spacing following an unordered list, what impact does that have if it is followed by a heading rather than a paragraph? Do my tables play nicely with other content types? And so on.

I've personally found this to be quite helpful, if only because it removes the need for me to keep viewing source to see the markup for commonly used elements that I just can't seem to remember the code for.

What are some tactics that other people use when it comes to this issue? Sticky notes?

Further Reading

Posted on: January 27, 2009 | No comments

Recent Entries in "Web Design"

Comments

Comments are closed for this entry.

TOP STORES

Categories

Subscribe

Subscribe to my RSS FeedSubscribe to my Web Design Blog RSS Feed

Proud member of 9rules network