Marginal CSS Attributes

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

Instead of <b> and <i> use <strong> and <em>. These have semantic meaning and are often default-styled by browsers to be the same as <b> and <i>, and of course you can control their style like any other element.

Answer 2

I certainly would avoid creating Bold and Italic classes in your CSS stylesheet.

When you say 'Marginal', if you mean that it is like a one-off case and you dont feel you should create a class just for this one case, then what about just using inline CSS?

e.g...

<p>
    <span style="font-style:italic">This</span> man? 
    <span style="font-weight:bold">What</span> are you thinking?
</p>

Answer 3

I think you did it write using . You could use too to render default bold but it would have another meaning since it precise the importance of the text within it.

There's no better way for a one-attribute css rule.

Answer 4

Why not create a css class that describes the intent rather than the action of emphasizing. You could call it something like "importantWord", and yes, it's fine that it only contains a single rule. The important thing is that if you decide to change the appearance of the style, semantically, it will still make sense.

Answer 5

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).