Make a Class or ID Name tutorial

When choosing names for id and class attributes you should remember the
structure and presentation separation. Once more, the values you choose should
not suggest presentation.
Having:

<p class=”redtext”>Beach bottom bikinis...</p>
with the CSS to style it:
.redtext { color: red; }

is kind of missing the point. In this example, although class=”redtext” doesn’t
actually do anything on its own, it is still not separating the suggestion of presentation
from structure.
To put it in practical terms, what if you decided that you didn’t want those particular
classes in red any more? It would be a bit daft to then have:
.redtext { color: blue; }
So your class and id names should also be semantic, just like tag names.
<p class=”bikinis”>Beach bottom bikinis...</p>
This example makes much more sense to the structured semantic document and
because it has nothing to do with presentation, you can apply any color or anything
else to it and it will remain completely sensible.
And it’s not just something as simple as colors or boldness, for example. Think
whether the class or id names are suggesting what the corresponding CSS rule
set is using and if they are they’re not good.

id=”largebox”, class=”hidden”, id=”float1” are all just as bad as class=
”redtext”.

Note that an id or class name cannot start with a number—it must begin with a
letter or an underscore.