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 (see below), 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 About Markup Guides
Content Formatting Quick Reference
Use this quick reference to see how the most common content types are styled across this site and the HTML/Textile used to format them. It also shows how different content types interact with each other to ensure that the formatting works in a variety of content arrangements.
Lists
Unordered List
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Integer id urna non orci pellentesque faucibus. Nunc tristique lorem id.
- Nunc tristique lorem id turpis.
- In at lacus id nisi imperdiet mattis.
Ordered List
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Integer id urna non orci pellentesque faucibus. Nunc tristique lorem id.
- Nunc tristique lorem id turpis.
- In at lacus id nisi imperdiet mattis.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed nisl.
Heading Level 1 (H1)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed nisl.
Heading Level 2 (H2)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed nisl. Duis mauris nulla, varius in, faucibus at, scelerisque vitae, libero.
Heading Level 3 (H3)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed nisl. Duis mauris nulla, varius in, faucibus at, scelerisque vitae, libero.
Images
Image with a caption:
Blockquotes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed nisl. Duis mauris nulla, varius in, faucibus at, scelerisque vitae, libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Inline Formatting
Lorem bold text dolor sit amet, strikethrough adipiscing elit. In sed nisl. Duis mauris nulla, bold text, emphasis faucibus at, link text scelerisque vitae, libero.
Code Presentation
<ul>
<li>Link One</li>
<li>Link Two</li>
</ul>Tables
Example table:
| Col 1 | Col 2 |
|---|---|
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |