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