Smashing Magazine, which I had heretofore never heard of, has an excellent article called 70 Expert Ideas For Better CSS Coding. The post is full of a wide range of wonderful suggestions on how to get the most out of your CSS-based designs, compiled from blog postings from other designers around the web. Every designer tends to have his or her own set of rules to go by when building a site or “chopping” a designers renderings into into XHTML/CSS. I have my own, and you can see it by just viewing the source code on this site and checking out the CSS here. However, it’s always great to see what other designers have come up with.
Some of the suggestions seem so obvious you wouldn’t think they would deserve a mention:
1 ID per page, many classes per page. “Check your IDs: Only one element in a document can have a certain value for the id attribute, while any number of elements can share the same class name. [..] Class and id names can only consist of the characters [A-Za-z0-9] and hyphen (-), and they cannot start with a hyphen or a digit (see CSS2 syntax and basic data types).” [Roger Johansson]
But some suggestions seem so obvious you wonder, “Why didn’t I think of that before?!?!?!”:
Organize your CSS-styles, using master style sheets. “Organizing your CSS helps with future maintainability of the site. Start with a master style sheet. Within this style sheet import your reset.css, global.css, flash.css (if needed) and structure.css and on occasion a typography style sheet.”
This is such a novel idea, but such a good one.
Many suggestions rely on versions of CSS that aren’t supported in “major” browsers, and some suggestions rely on CSS hacks to get around browser inconsistencies. That being said, every CSS coder, from beginner to expert, will find something valuable here. As for me, I am making it a point from now on to improve the organization of my CSS code. Thanks Smashing Magazine!
