Question

How do you guys handle marginal CSS? By marginal, I mean a single word or phrase that needs italics or bolding. It seems silly to declare a ‘bold’ class with just

Bold { font-weight: bold; }

Or italics, either!

Italic { font-style: italics; }

But I find myself hesitating to put class like that into my css reset.

<p>
    <span class="Italic">This</span> man? 
    <span class="Bold">What</span> are you thinking?
</p>

Obviously if you’re going to combine a bunch of properties to make something look different, it makes sense…

.HoverOnMe
{
    color: #880;
    text-decoration: underline;
    font-style: italic;
}

But I’d classify the above css style as ‘non-marginal’.

We’re taught that elements like <b> and <i> are bad because they mix structure and style, and therefore we shouldn’t use them. So what is the right way to handle ‘marginal css’?

Answer 1

When you add a class to an element, name that class by what it represents, not what it looks like. class="Italic" is an anti-pattern that completely misses the point of separating content and styling.

<span class="Italic">This</span> man? 
<span class="Bold">What</span> are you thinking?

If what you mean to say is that the word “This” is an emphasised word—that is, if you were to read the sentence, you’d change your tone of voice when pronouncing it—then you should say so with a class name like class="emphasised". However you don’t need to do that, because there is already an element available in HTML that has exactly that meaning, specifically <em>.

<em>This</em> man?

As luck would have it, browsers will render <em> as italic by default, so you wouldn’t need any more CSS.

You shouldn’t always use <em> for italics. There are other reasons a word might be italicised. For example it might be a citation (use <cite>), or a phrase in another language (use <span lang="fr">c'est la vie</span>), or it might just be a typographical quirk with no semantic meaning (in which case a plain <span> with styling is fine). Use the element that most closely matches the semantics of what you are trying to say, and adjust the rendering with CSS if the default rendering doesn’t match what you wanted it to look like.

There is a second form of emphasis that is rendered as bold by default, <strong>:

<strong>What</strong> are you thinking?

This is usually considered to mean “more emphasised than <em>”. If that is what you were going for, use that tag. But again, don’t jump for <strong> just because you want something bold. If it should be bold because it’s a heading, use the heading tags. If it should be bold because it’s the first line of an article or something, add a class="first-line" (or simply use a CSS :first-line selector, where appropriate).