With CSS becoming an integral part of your website architecture, putting more emphasis on organizing your CSS files is important. In this article by Garrett Dimon, giving your CSS files some order involves a few simple steps.
Personally, I order my CSS files this way:
- Re-defined Tags; body, h1, h2, h3, p, td, etc.
- ID selectors; #wrapper, #content, #footer, #header, etc.
- Classes; .copy, .eyecandy, etc.
- Links; a:link, a:visited, a:hover, a:active
Keeping things in this order makes the CSS files predictable for me. I have seen many CSS files and I can tell the difference between a CSS file that was generated from a program from one that was hand-coded. The programmed CSS files are erratic and there's no sense of order in them. Most hand-coded files I've seen have a semblance of order in them.
Keeping your CSS file(s) external to the site and using the link tag is a great way to approach overall site aesthetics, although there are always some pages that need special attention and therefore require embedded styles. If at all possible, avoid inline styles. Inline styles are great for e-mail marketing campaigns though. If you try to link to an external CSS file, spam filters might strip it from the e-mail and leave you with naked text. Using inline styles resolves that issue.
Finally, the suggestion to use comments in your CSS file is no joke. Yes, you may be the only one developing your site now, but a few months down the road when you need to make a change, it's going to make your life easier to include comments in your file rather than weeding through all the code to find what you are looking for. It makes even more sense to use comments if you're working in a team environment or you are passing the site on to another developer. Try to be clear in the wording and structure of your comments. Things that only make sense to you and are too specific might not make sense to anyone else.
Al Lemieux
Senior e-Learning Developer
SyberWorks
