27Jan2009

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?

15 Comments Posted (Add Yours)

Thanks for the content formatting reference, formatting CSS is a nightmare to start with!

Really appreciate your quick reference guide would be great if you could create one for script.acol.us also!!

1. Posted by web design london on January 27, 2009

I've been using Dreamweaver snippets to store various pieces of code that range from HTML, CSS and javascript to pieces of CMS templates too. I've actually created default HTML and CSS templates as snippets and use them as the starting point for all my new projects.

2. Posted by John Faulds on January 27, 2009

definitely stick notes for me though always looking for something better. as "web design london" says, one for script.acol.us would be terrific!

3. Posted by web design supermarket on January 28, 2009

It's usefull for me. I'm using dreamweaver too and it's not so hard to organize the formatting

4. Posted by Web Designer on January 28, 2009

This is the type of thing that once you start doing, you don't know how you went so long without it! Good write up, and great idea!

5. Posted by RipFish on January 30, 2009

Good stuff and quick reference guide

6. Posted by Jag on January 31, 2009

I usually have a notes page I use but that reference guide can be very useful thanks!

7. Posted by Orange county graphic design on February 02, 2009

Thanks for sharing your thoughts...I think it was a great post...a very interesting read!

8. Posted by Shaun B on February 02, 2009

that is great for the documentation. a page with the complete formatting. I guess your table tag need table summary.

9. Posted by dani on February 27, 2009

For actually browsing through your CSS, if your editor can fold bracketed constructs, you can reduce CSS file to only have as many lines as you have selectors. If you put a comment on what it is on the same line as the opening brace, its like reading an essay.

For instance, you'd see this:

.selector1 { /* what page, what effect, notes */
.selector2 { /* pretty image box + caption w/dropshadow */

when the individual selectors could have x lines of rules

.selector1 { /* what page, what effect, notes */
property: value;
property: value;
...
}

10. Posted by emily on February 27, 2009

Thanks for sharing, great guide!

11. Posted by BenSky on March 08, 2009

Heya! I'm loving reading through your posts - they're really helpful!

I think creating a style guide is a great idea, although I never seem to take the time to do it. I usually just organize my CSS as much as possible, starting with Global Hacks (heh...), Global Elements (headers, links, form elements, p, strong, etc), Global Layout and Global Classes (.clear, .floatLeft, etc). As long as I know the repetitive stuff is at the top of my huge CSS file, I can usually access it pretty quickly.

I like the idea of being able to see the changes IN YOUR OWN SITE though, all on one page. Very useful.

12. Posted by Biff on March 15, 2009

Thank you, something we have recently starting doing and is very very helpful.

13. Posted by Rob on March 25, 2009

You have made some great points being a website designer in Leeds some of this really is important.

It's important to keep your code easy to read and formatted, for future use - it might not be you working on it!

Thanks

14. Posted by Ryan Dearlove on November 18, 2009

Being organize is I think key in business. With mostly a lot of people working on one project this can save a lot of money save you a lot of hassle.

15. Posted by web design Hertfordshire on March 19, 2010

Smiley Cat Weblog - Web design thoughts and commentary.

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

Further Reading

Recent Entries in "Web Design"

15 Comments Posted (Add Yours)

Post a Comment