CSS Style Naming Recommendations

From Six Revisions, “CSS Tip #2: Structural Naming Conventions in CSS.”Sears Tower


In a nutshell, they recommend naming CSS classes based on the structure of the document instead of a commonly used presentational style. For example, you could give a DIV an id of “rightColumn.” That implies that the div (and corresponding CSS class) must be the right column. Sure, until your designer decides that the column should instead be located on the left side in a new version. The structural approach would be to name the column based on the use of the column, not based on it’s presentation. For example, it might be called, “navigationColumn".

I know I’ve used a mix of presentational and structural naming conventions in the past in CSS, but I’m definitely inclined to follow this general advice of going with structural names.

There’s plenty of other examples and details in the post here.

What’s your pattern for naming styles?