CSS Naming Conventions for IDs and Layout Blocks

When naming the IDs and classes in a document, keep in mind that the goal at all times is to separate content and structure from presentation. This means that for classes and IDs it is best to call out what the item is or does, as opposed to what it looks like. Note that in the example above, the content IDs were not named left-rail, middle-column, or right-rail, as that would have merely reflected their location on the page, rather than their function.

The W3C has an excellent note on its Web site discussing meaningful classes here (www.w3.org/QA/Tips/goodclassnames). This discussion also introduces the concept of semantics or meaning in markup.

Consider the following:

<style type=”text/css”>
p.rederror {color: red;}
p.bolduser { font-weight: bold; }
</style>
<p class=”rederror”>Warning: Username not found!</p>
<p class=”bolduser”><label for=”username”>Username:</label>
<input type=”text” id=”username” name=”username” /></p>