CSS Crib Sheet
Mezzoblue’s Dave Shea gives us an extremely useful CSS Crib Sheet. I’ll give you a shortened version of Shea’s list below, along with some additions from Roger Johannson. Some of the tips Shea gives us may not make sense to you yet, but keep the crib sheet handy; you will refer to it again and again.
- When in doubt, validate.
- Build and test your CSS in the most advanced browser available before testing in others, not after.
- When relying on floats for layouts, make sure they clear properly.
- Margins collapse; apply padding or a border to avoid.
- Try to avoid applying padding/borders and a fixed width to an element..
- Avoid the Flash of Unstyled Content in IE.
- Don’t rely on min-width in IE.
- When in doubt, decrease widths.
- Content not showing up properly in IE? Check the Peekaboo bug..
- Be careful when styling links if you’re using anchors.
- Make sure your desired effect actually exists. (Shea is referring to non-standard CSS effects.)
- Divide and Conquer: use commenting to turn off large sections of style. (Nifty trick for debugging stylesheets.)
- Remember “LoVe/HAte” linking.
- Remember “TRouBLEd” borders.
- Specify units for non-zero values.
- Test different font sizes.
- With stylesheets, test embedded (internal); launch imported (external).
- Add obvious borders to help debug layouts.
- Don’t use single quotation marks around paths for images.
- Don’t link to empty stylesheets as “placeholders” for future stylesheets (like handheld or print media style sheets).
- Understand the CSS box model.
- Use only allowed characters for class and id.
This sheet refers to the CSS Crib Sheet for this site.