[UPHPU] Validation

[Jon Jensen]

> This means you are not writing pages correctly.  Your 
> containers should be logical place-holders and every single 
> item on your page should have an ID and a CLASS attribute.  
> In this way your page has a logical markup and who cares (in 
> the abstract sense) what your appearance looks like, because 
> that will inevitably change.

Thought I'd jump in here... while I agree with most of the pro-CSS stuff
here, I have to take issue with this statement. In my mind, overuse of
classes and id's is worse than tables. Perhaps it's not what you intended,
but that statement brings to mind a vision of an html page containing
nothing but divs and spans with classes and id's.

The ideal balance is to use as much semantic markup as possible, and limit
classes or id's to a bare minimum. Use <h1> for a heading, <p> for a
paragraph. Ideally, you might have an id for each section, and not more than
a couple classes or id's used within each section. If you put a class/id on
every element (or even more than 10% of them), you are unnecessarily
cluttering up your markup and it usually means you don't konw how to write
good selectors.

Here's an example of what I'm talking about. Only the relevant parts are
included...

A bad example:

<style type="text/css">
  #page-title{
    color: blue;
  }
  #top-menu{
    padding: 0;
    margin: 0;
  }
  .top-menu-item{
    padding: 0;
    margin: 0;
    float: left;
  }
  .top-menu-link{
    display: block;
  }
  .top-menu-link:hover{
    background: yellow
  }
</style>
...
<div id="header">
  <h1 id="page-title">Page Title</h1>
  <ul id="top-menu">
    <li class="top-menu-item">
      <a class="top-menu-link" href="/">Home</a>
    </li>
    <li class="top-menu-item">
      <a class="top-menu-link" href="/company.html">Company</a>
    </li>
    <li class="top-menu-item">
      <a class="top-menu-link" href="/products.html">Products</a>
    </li>
  </ul>
</div>

So why is this bad? Because every class or id is completely unnecessary
except for "header". It makes the HTML more bloated, and it makes the CSS
hard to follow. Since the selectors are simple class names or id's, you have
to be familiar with the markup to have a clue as to what elements they might
affect.

A good example:

<style type="text/css">
  #header h1{
    color: blue;
  }
  #header ul{
    padding: 0;
    margin: 0;
  }
  #header li{
    padding: 0;
    margin: 0;
    float: left;
  }
  #header li a{
    display: block;
  }
  #header li a:hover{
    background: yellow;
  }
</style>
...
<div id="header">
  <h1>Page Title</h1>
  <ul>
    <li>
      <a href="/">Home</a>
    </li>
    <li>
      <a href="/company.html">Company</a>
    </li>
    <li>
      <a href="/products.html">Products</a>
    </li>
  </ul>
</div>

We've reduced the markup, and now if you look at the CSS, it's a lot easier
to figure out what's going on... When you only have a few id's per page, it
becomes very easy to visualize what the CSS will do.

Jon