I’ve been thinking about how to put this together for a while, so I think I’ll open it up to everyone for contributions, then build an actual resource out of it somehow.
Here’s the idea: a CSS Best Practice is a one sentence action statement, a “thou shalt” or “thou shalt not” (paraphrased, of course) that highlights a specific issue, be it browser compatibility, code integrity, or whatever else can actually be considered factual (instead of opinion). It’s followed by a paragraph that goes more in depth about why or why not someone would want to follow the action, with links to further reading. This is the stuff that, if you know it ahead of time, makes your design process much less of a headache.
The final resource would be a single-page collection of learned knowledge that might otherwise be spread out too much to be useful. Consider it a crib sheet for designing with CSS, one page that’s full of valuable guidelines.
Here are some of the ones I’ve started with:
- Build and test your CSS in the most advanced browser available before testing in others, not after.
- If you build a site testing in a broken browser, your code begins relying on the broken rendering of that browser. When it comes time to test in a more standards-compliant browser, you will be frustrated when that browser renders it improperly. Instead, start from perfection and then hack for the less able browsers. Your code will be more standards-compliant from the start, and you won’t have to hack as much to support other browsers. Today, this means Mozilla, Safari, or Opera.
- Don’t use quotation marks around paths/URLs.
- When setting a background image, or loading in an imported file, resist the urge to surround the path with quote marks. They’re not necessary, and IE5/Mac will choke.
- Try to avoid applying padding/borders and a fixed width to an element.
- IE5 gets the box model wrong, which really makes a mess of things. There are ways around this, but it’s best to side-step the issue by applying the padding to the parent element instead of the child that gets a fixed-width.
- Combine selectors.
- Keeping your CSS light is important to minimize download times; as much as possible, group selectors, rely on inheritance, and reduce redundancy by using shorthand.
That’s just a start. There are a ton at the back of my mind, but I’m having trouble fishing them out. This is one of those instances where you need to be doing it at the time to remember all the specifics. Add your own in the comments.