Class Naming

From CSS Discuss

Jump to: navigation, search

Notes on Intelligent Class Naming

Remember that it usually makes more sense to name classes based on their meaning, rather than their appearance.

One of the benefits of CSS over presentational markup is that it eases presentational changes. If you want something to be small and red, ask yourself why.

Naming a class based on its currently-desired appearance misses the point, and will lead to silly-named classes.

If you named the example class "smallRed", as soon as you redesigned to have small notes as blue and bold, it wouldn't make sense.

Naming the rule "minorNote" would make sense even after the minor notes are changed to be bold and blue.

This:

.minorNote {
  color: #F00; 
  font-size: 0.9em;
} 

becomes this:

.minorNote {
  color: #00F; 
  font-weight: bold;
}

Avoid using underscores in class and id names at all costs! Also avoid starting with numbers. While this is no longer prohibited by the spec (and will therefore validate) it will cause problems with older browsers which followed the old spec.

Further Resources

Personal tools