Use span.myStyle or .myStyle for text formatting?

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
bwofficer
Propeller Head
Posts: 57
Joined: Tue May 12, 2020 2:16 am

Use span.myStyle or .myStyle for text formatting?

Post by bwofficer »

My stylesheet includes several styles for formatting text but the style rules are expressed in different ways. Some begin span. but others begin with just the dot. I want to be more uniform. Which is best practice?

Two examples:

Code: Select all

span.myEmphasis {
	font-weight: bold;
	color: var(--textEmphasisColour);
	font-size: 10pt; }

.toDoHighlight {
		background-color: yellow; }
Should they both begin "span."? Should they both begin with a simple dot? There doesn't seem to be any difference in practice when it comes to using them, but it looks messy on the stylesheet to have this difference.
Nita Beck
Senior Propellus Maximus
Posts: 3667
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY

Re: Use span.myStyle or .myStyle for text formatting?

Post by Nita Beck »

The selector that is just the "dot" selector is a generic selector, meaning you can apply it to lists, tables, divs, paragraphs, spans -- anything. But that might not yield the result you expect univerally. If you are trying to define a selector that you'll only ever apply to inline characters, then I suggest you don't use a generic selector but create a custom span selector, such as "span.UILabel" (when you want to show a user interface item with a specific formattting.)

HTH
Nita
Image
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Use span.myStyle or .myStyle for text formatting?

Post by NorthEast »

For best practice, I'd also suggest using the em (emphasis) tag instead of span, since the style is intended to convey some emphasis; e.g. use em.myEmphasis instead of span.myEmphasis.
Although you might not see a visual difference, accessibility aids will understand the underlying semantic meaning of tags, so they know em means to add emphasis, whereas a span tag is generic with no particular meaning.

Think about that for all the tags you use, so for headings you should use say h1.myHeading (h1 means it'a heading), instead of div.myHeading (div has no meaning) or p.myHeading (means a paragraph, not a heading).
bwofficer
Propeller Head
Posts: 57
Joined: Tue May 12, 2020 2:16 am

Re: Use span.myStyle or .myStyle for text formatting?

Post by bwofficer »

Dave Lee wrote:For best practice, I'd also suggest using the em (emphasis) tag instead of span, since the style is intended to convey some emphasis; e.g. use em.myEmphasis instead of span.myEmphasis.
Thanks. I didn't realise I could do that. I didn't realise em was a tag in its own right, just like p, h1, etc. Coming from a paper docs background, html and css doesn't come naturally to me yet. I'll get there eventually, though.
Dave Lee wrote:Although you might not see a visual difference, accessibility aids will understand the underlying semantic meaning of tags, so they know em means to add emphasis, whereas a span tag is generic with no particular meaning.
Good point. I can see the value in that. Although this content (like all my content so far) is PDF only, it's worth me adopting this as good practice. At some point in the future the content might welly be put online as html, so it's worth considering online accessibility upfront to make that transition easier.
bwofficer
Propeller Head
Posts: 57
Joined: Tue May 12, 2020 2:16 am

Re: Use span.myStyle or .myStyle for text formatting?

Post by bwofficer »

Nita Beck wrote:The selector that is just the "dot" selector is a generic selector, meaning you can apply it to lists, tables, divs, paragraphs, spans -- anything. But that might not yield the result you expect univerally. If you are trying to define a selector that you'll only ever apply to inline characters, then I suggest you don't use a generic selector but create a custom span selector, such as "span.UILabel" (when you want to show a user interface item with a specific formatting.)
Thanks.

I want to apply the to-do style to text within a para or to one or more complete paras. I might want to apply it to individual lists too, tables, even images, plus chunks of content that could contain any of these. From what you're saying, that means I need to keep this one as a generic selector.
Post Reply