UX 101: HTML/Design naming conventions

Rule: Keep in mind that class names are for developers for maintainability, not users

  1. Functional class names: Class names that describe the styling of the elements based on their function or meaning
  • e.g. positive-button, important-text, selected-tab
  • PROS: shows connection between the class name, the style it applies, and the reason the styles are being applied
  • CONS: not always possible because design isn’t always logical

2. Content-based class names: Class names that describe the content they contain.

  • e.g. submit-button, intro-text, profile-photo
  • PROS: separates content (HTML) from styling (CSS)
  • CONS: works fine if working on small websites; inappropriate for large sites

3. Presentational class names: Class names that describe the styles that are applied to the element

  • e.g. green-button, big-text, squiggle-border, round-image
  • PROS: conducive to code reuse; scales gracefully; self-describing
  • CONS: maintainability concerns
Lesson learnt:
Use functional class names as much as possible
Use content-based class names for small sites
Use presentational class names for large sites

This is a summary of the article written by Ethan Muller.