Fotiman - 10:42 pm on May 18, 2007 (gmt 0)

If the point is to turn the text (or whatever) green, then it's class = green. ... A rule to float the site logo into the upper left corner and clear it? class = logoleft and so forth.

Ah yes... the exact WRONG way to use CSS.

One of the benefits of CSS and separation of presentation and content is that once you define your markup, you can make changes to the presentation by only touching the CSS file. In your example, you're using class names that describe the "presentation" instead of the "content", which is bad. Here's why:

Suppose you do something like this:

<p class="green">Copyright 2007...</p>

Some day, you decide that you want this to be blue instead of green. If you modify the style for green to have blue color, that's going to be confusing. The alternative is to find all of the places in your markup where you've specified class="green" and change it to class="blue". You're losing the benefit of not needing to touch the markup in this case.

A much better approach is to use class names that describe the content. For example:

<p class="copyrightNotice">Copyright 2007...</p>

Then in your CSS, you would have:

.copyrightNotice { color: blue; }

In this case, you only have to change the CSS, and there is no confusion about what the style does.

[edited by: Fotiman at 10:50 pm (utc) on May 18, 2007]