tjameswhite.com

I’ve been slowly working my way through Eric Meyer on CSS. While the projects in the book are a little goofy, the practicality of them is indispensable, and sneaky. Sneaky because I have found that they have worked their way into my daily coding — and that is a good thing.

For example, I recently retooled the e-newsletters that I produce at my day job. I had eight very similar, yet subtly different templates. They utilized several different classes, which were applied to various paragraphs throughout. Over time I had tweaked the templates, but the tweaks didn’t always get moved from one to the next. So I had to remember which newsletter had the latest code and try to copy it to the one I was working on.

Yes, it was a pain.

With the retooling, I’m down to one template and only one or two classes. All other styling has been moved up to the highest parent element possible. This means no more classes for each paragraph — just create a paragraph and, depending on where it is, voila! it’s styled correctly.

I was able to reduce 8 into 1 because all of the newsletters have the same layout, just different header images and color schemes. By added a <div> that wraps the entire content, I just have to change the id of that <div> and the color scheme changes throughout.

There are two further bonuses to the improved coding. For one, the new layout degrades better in non-compliant e-mail/browser clients. Also, I have implemented semantic markup and replaced image-based headers with text. Now when I create text versions, using NoteTab Lite, all of the headers are in place and there is less clean-up for me to do.