span or generic class?

[pdenchfield]

When defining a character format tag in a stylesheet, is there a best practice for making it span instead of generic class? (or vice versa)

Which is better - span or generic class?

Span class example:

Code: Select all

span.Emphasis
{
	font-weight: bold;
}

Generic class example:

Code: Select all

.Emphasis
{
	font-weight: bold;
}

[doc_guy]

You'll get better performance if you use span.emphasis than if you use .emphasis. The reason is that browser has to check all elements for the emphasis class, rather than just checking against SPAN elements. The browser processes the CSS and when it finds the generic class, it evaluates the entire document to see if the class is applied to any element.

The reality is that if you only use a few generic classes, you'll find that you won't notice the difference in speed, likely.

The other difference is related to the first one I guess. It's that generic classes can be applied to any element. So you could make a whole paragraph a class of emphasis, where if you use a span class, you can only apply it to content contained in a SPAN.

If you are only going to use it inline, then use the span class. If you need to apply it to multiple block-level elements (or even inline elements), use the generic class.

[pdenchfield]

Thanks, Paul! Very helpful.

[NorthEast]

You might also consider how other people will use the stylesheet.

I tend not to use generic classes for any available styles, since they can be applied to anything and potentially break the in-house style rules; whereas if it's not a generic class, it locks people to using a style for its intended purpose.

[ChoccieMuffin]

I have a few generics that I can apply to various items, usually headings and paragraphs, to control page layout in printed output. For example, I have .PageBreakBefore, which for prettiness I might want to apply to any heading. Having a generic means that I don't have to have h2.PageBreakBefore, h3.Page BreakBefore, p.PageBreakBefore etc etc, so it keeps my stylesheet neater.

I also have generics for .COMMENT and .QUESTION, which is use alongside conditions so that I can make notes in my docs but condition them out in my targets.