Quick Comment: Choose Class/ID Names Based on Semantic and/or Structural Meaning

Replying to comments on my 24ways article about YUI Grids, I had occasion to mention the two things to consider when choosing good class and ID names. I want to write more on this, but for now wanted to cross-post my quick note:

Regarding class and ID names:

Names should not be based on appearance, but on meaning. For maximum extensibility, choose names that express semantic meaning (derived from the element’s content), and/or structural meaning (derived from the element’s role in the DOM’s tree). Good structural names include “footer” and “module”; good semantic names include “price” and “date”.

The alternative, what-it-looks-like names such as “left” and “doc950px”, is contextually brittle (i.e., mobile) and temporally brittle (because things change). These are the same reasons professional consensus says class=”redButton” and class=”smallBoldVerdana” are undesirable.