- No inline styles.
- Use the most semantic tag available for each blcok and element on the page.
- Think in pages, blocks, elements.
- Start with an understanding of the structure of the page. With this understanding, you should already have a good idea what class selectors you will attach to each element.
- As few elements as possible to structure the document.
- Only add elements for presentation if there is absolutely no pure-css solution.
- Keep html classes simple. Call it what it is.
- Classes used to indicate state should be qualified:
.active= wrong;.collapsible-active= right. - Use class names to say what it is and describe it's state, but not what it looks like.
- Do not blindly copy chunks of html code as it may not conform to these principles.
- For crying out loud, let's stop creating and perpetuating misnomers in our code!
- Please do not use javascript to reposition elements for responsive designs. Use CSS!
- No
!important. Get rid of inline styles. Reorder css includes. Fix selectors. - Aim to achieve the desired affect with the fewest rules possible.
- Everything responsive. No good excuse to neglect responsive. 80% of responsive is eliminating, or avoiding, fixed widths. 20% is media queries.
- Start at the top, work left to right, then work down. One block at a time. One element at a time.
- No more than three stylesheets served. Use a preprocessor if you need more.
- Selector specificity: Be deliberate in choosing how specific or general your selectors are.
- Don't use cryptic class names.