20 CSS Best Practices

  1. Create HTML first using a semantic wireframe and meaningful names for id and class attributes.
  2. Learn the language of css: selector, declaration, and property.
  3. Learn css syntax: the characters required to write accurate, readable styles.
  4. Put global styles in an external style sheet. Use embedded and inline styles only when appropriate.
  5. Write styles in a sensible order starting with reset code.
  6. Group styles that apply to similar content such as headings, lists, or forms together.
  7. Put each declaration on its own line to make the code easy to read.
  8. Save your work and refresh your webpage often to observe incremental updates.
  9. Use comments to separate the sections of your style sheet.
  10. Use comments to document the author, latest update, or anything else that is important.
  11. Use combination selectors such as h1, h2, h3 to code each declaration only once.
  12. Use combination properties such as margin when appropriate to cut down on the number of declarations.
  13. Study and truly understand the more difficult concepts of css such as float and block versus inline elements.
  14. Use an outer wrapper and the margin: 0 auto; declaration to center content within the outer wrapper.
  15. Measure widths in % to make the containers responsive.
  16. Measure text in ems or % to make the text responsive.
  17. Use Firebug or a similar web development tool to analyze and debug errors.
  18. When debugging, use comments to "comment out" a rule that you are modifying (instead of deleting it).
  19. Validate all html and css.
  20. Never stop learning.