Bringing It Together With Semantics

Kevin Lawver

This is a presentation. If you'd like to view all the slides like a normal web page, you can.

So Now You Know HTML and CSS

• You know that there's a whole world of markup and selector possibilities
• Then why do I still see div's and span's all over the place?
• We're going to bring our knowledge of HTML and CSS together to create semantic markup and style.

Bringing The Two Together

• CSS is completely dependent on markup.
• CSS can only be as good as the markup is styles.
• It is impossible to write CSS without knowing something about the markup you're styling.
• Semantic markup has meaning.
• If we have truly semantic markup, we can have semantic style as well.

Kevin's Theory of Heterogeneous Markup

• It's easier to style documents when you know what markup to expect.
• It's easier to style documents when there are different types of elements to build selectors around.
• It's a lot easier to read type selectors than class selectors.
• You will build smaller, faster, better web applications if you use fewer divs and open yourself to the wide array of semantic elements the XHTML 1.0 spec has to offer you.

Homogenous Example

Taken from AOL Search 6.0:

<div id="results">
<div class="result" onmouseover="linkHover(this)" onmouseout="linkHide()">
  <div class="link">
    <div class="linkdetail" >
      <a id="lrurl1" href="http://toefl.org"><span id="ltitle1"><b>Test</b> of English as a Foreign Language (TOEFL)</span></a><br />
      <span id="ldesc1">Information about the TOEFL tests and services are available online. Try the  TOEFL practice questions.</span><br />
      <b><span id="ldurl1">http://www.ets.org/toefl/</span></b>
    </div>
  </div>
</div>
</div>

Heterogeneous Version

Taken from Site & Channel Search for the same result:

<ul class="results">
<li id="google_strict_teensItem1"><a href="http://toefl.org">Test of English as a Foreign Language (TOEFL)</a>
 - Information about the TOEFL tests and services are available online. Try the TOEFL practice questions.
<cite>http://www.ets.org/toefl/</cite>
</li>
</ul>

The Difference

• I even took out some javascript stuff and other markup from example one to be "more fair". I did change one thing about the second example (the cite used to be an h5, which I know now was wrong).
• The size is different.
  • Example 2 is 48% smaller than Example 1
  • Over a document that has 15 results on it, that turns into over a second of download time difference between the two.
• Example 2 is readable as it is.

Thinking Outside The Box (div)

• Divs are "divisions". Keep them for large containers for major sections of a document.
• For repeated items, use lists.
• Use inline elements for short pieces of content and then style them as blocks.

Remove Span From Your Vocabulary

• Span is a useless element.
• It's long (13 characters to have an open and a close).
• If you have to, use a shorter meaningless element like b or i.

Semantics Are What You Make of Them

• The meaning of a lot of elements is not set in stone.
• This means you can bend it a little.
• See the cite element in example 2.
  • It is perfectly OK to use inline elements as blocks with CSS.

Building Semantic CSS

• With truly semantic markup, you can write semantic CSS.
• It's easier to read.
• It's more efficient for the browser to apply.
• It's easier to write... really.

My Homogenous Selector

To style example one's URL:

Oh wait, I can't, because it uses b's in the title and description.

Homogenous Take Two

If I really had to...

#ldurl1 { 
    font-weight:normal; 
    font-variant: normal;
    color:#999;
}

Anyone see a problem with that?

My Heterogeneous Selector

To style example two's URL:

ul.results li cite {
    font-weight:normal; 
    font-variant: normal;
    color:#999;
}

Semantic CSS...

• Uses hooks to build appropriately specific descendent selectors.
• Uses the heterogeneous markup to build unique selectors that don't require multiple overrides depending on the situation.
• Uses an id or unique element as a starting point for every selector.

Burn The Blankets

• No more type selectors that apply to all elements!
• No more generic wildcards
• Be careful about what styles you apply to generic elements and styles that inherit.

Give Every Selector A Home

• Always descend from an ID
• Use selectors rooted to a logical container
• Descend down the DOM to get proper specificity

Create Scopes And Stick To Them

• Descending from a logical container keeps your styles confined to a scope.
• Keeps your styles from "overflowing" and affecting other unintended elements
• Have to fake it until we come up with a spec for scoped style sheets (coming some day)

Appropriately Specific

• Be just specific enough
• Don't use !important when increased specificity will do.
  • Don't ever use !important - it's a crutch for those who don't get specificity

Keep Your CSS Orderly

• Start from less specific to more within your document.
• Try to style containers in document order.
• Style the container, then its descendants
• Use logical selectors to keep your CSS readable

Keep Your Declarations Orderly

• Use the following order in your declarations (even if you don't use that particular section):
  • positioning
  • float and clear
  • width and height
  • margin and padding
  • overflow
  • border
  • background
  • font and text effects
• Keep hacks grouped with overridden properties and declarations

Sandbox "Dangerous" Content

• hats, ads and external content, oh my!
• Create boxes for them outside your styled flow
• Don't be afraid to use overflow:hidden

Best Practices For The Syndicator

• Use obviously unique id's and always descend from them.
• Avoid arbitrary classes.
• Keep it simple.
  • Avoid complex positioning and floats if you can help it.
  • If you do float, clear yourself.

Best Practices For The Includer

• Use the sandbox
• Don't float included content unless it's in a box that's positioned relatively
• Protect yourself:
  • overflow:hidden the included content's container.
  • keep it outside your normally styled flow

Example: Document Skeleton

• Let's start simple, and look at a basic example of the concept.
• Here's our skeleton
• Notice how everything but body descends from an id.
• But, it's minimally specific after that, to allow for more specific overrides later on.

Example: Imported Content

• Let's say that we're going to import a list of links on the right hand side of our content area that has its own set of styles.
• Here's our skeleton, plus the new stuff.
• Notice how specific the CSS is for the imported content, overriding using shorthand.
• Still doesn't cover all possibilities, but covers the basics.

Example: Imported Content Run Amok

• Let's say our imported content goes crazy and wants to be 300px wide instead of the 125px we agreed on.
• Same page, different js
• Nothing bad happened! Why?

Example: In The Real World... Imported Content

• My AOL has to deal with an infinite amount of unreliable content.
• Images floated, ads, content of extreme width, etc. How do we deal?
  • We added float:none to images
  • We used overflow:auto on the container (a dd).
  • We cleared the last element in the container (p.readMore).

Conclusions

• Use more logical selectors
• Stop wildcarding
• Avoid unintended inheritance

Challenges

• When member-created or unreliable content is used, this becomes very tricky.
• Until we have better CSS support, especially selectors, we're stuck with descendant selectors, which aren't flexible enough.
• Breaking out of a divvy mindset can be difficult.
• Creativity is required.

Questions?