CSS best practice : bold and italics

CSS is a marvel. Separation of content and layout is almost a life-saver.

But somehow, somewhere along the line, a big bunch of programmers have gone overboard into CSS stupidity.

Consider blogger.com. They shun the <em> and <strong> tags in favour of <span> tags with inline CSS.

Yes, it's true that in the bad ol' days, programmers used the <strong> and <em> tags to mark headers, and yes it's true that that should stop (and should have stopped some years ago). If you're making a header, use a header tag, and use CSS (not <strong> and <em> tags) to define the visual appearance of your header.

But <strong> and <em> have a proper use as content-bearing tags. The use of bold and italics is as intrinsic to the writing process as the use of all-caps was before bold and italics came on the scene. The <strong> and <em> tags, correctly used, are not formatting tags. They are content tags.

Now here's where things get really interesting. Suppose you want to quote someone, and you want the quote to appear italicized, but suppose the quote already contains italics. Doing things my (sane) way, no problem. Doing things Blogger's way, and you are stuck down the creek without a paddle.

e.g. suppose I'm building a sales site for XYZ company, and they have a few customer testimonials in the righthand sidebar.

Here's fictitious testimonial #1 :

"You guys are awesome! Your product has changed my life!"

Now, let's do this the proper CSS way, and create a class named "Testimonial".

<span class='Testimonial'>"You guys are <em>awesome</em>! Your product has changed my life!"</span>

Obviously, we define the Testimonial class in our CSS file as follows :

span.Testimonial
{
font-style:italic;
}

All well and good, until someone notices that there is no difference now between the word "awesome" and the other words. Everything's italicized. What to do? Ah! Simple solution! CSS to the rescue! Add another definition to the CSS file :

span.Testimonial i
{
font-style:normal;
}

Voila! We have now preserved the "content" embodied in the <em> tag. Remember, <em> doesn't so much mean "make this italic" as much as it means "emphasize this". With the simple CSS given above, we have retained the emphasis of the enclosed <em> tag, by actually making it non-italicized.

In contrast, here's what Blogger does when you italicize some text :

"You guys are <span style="font-style:italic;">awesome</span>! Your product has changed my life!"

Can you see the problem? We can wrap it in our Testimonial span :

<span class='Testimonial'>"You guys are <span style="font-style:italic;">awesome</span>! Your product has changed my life!"</span>

... but we have completely lost a piece of content - being the emphasis on the word "awesome".

Now you might think you're really clever and point out that you could always make a CSS definition like this :

span.Testimonial span
{
font-style:normal;
}

... but if you'd given it a few moments more thought, you would have realized that this only works if you limit content to one type of emphasis only. Suppose a different testimonial used bold instead of italics, and still another used both bold and italics. Bummer. You're done for.

In short? <strong> and <em> are content-bearing tags. Sure - they've been misused and abused as formatting tags (e.g. where header tags should have been used instead), but the misuse doesn't change the fact that there is and always will be a very vital content-bearing role that these tags must carry. Many programmers think they're oh-so-clever and oh-so-standards-aware and oh-so-CSS-knowledgeable by replacing <strong> and <em> tags with <span>s that have inline styles, but in the process they are actually violating the very intention of CSS - they are replacing a content-bearing tag with what (in the way they use it) is actually a formatting element! Separation of content and formatting demands that ONLY <strong> and <em> tags be used to accomplish emboldening and italicization in the flow of content. Replacing them with spans that have inline styles might make you feel clever, but it violates the coremost principles of CSS. And it makes your pages bigger.

So there. :o)

Tune in next week for another episode of "CSS Bloopers" - the exciting program where your coding practices are mercilessly ripped to shreds. :o)