Web developer, Podcaster and Drupal Specialist. Subscribe to the Fundamentals of Digital Audio podcast. Subscribe to the Drupal Screencast Series.
Thoughts on CSS Best Practices
Regardless of what kind of Web development you are doing, you will always need to work with CSS before launching your site. I've been reflecting on best practices in CSS lately. So here is my list of best practices. This is not by any means a complete list or the gold standard for CSS development. This is just what I have learned so far (although I doubt many would find any of these statements controversial). Feel free to add your ideas in the comments.
- Start with 100% valid semantic xhtml. Make your markup describe the page or template you are creating. Invalid markup will create problems, even if one browser is forgiving of invalid markup, another will not likely be as forgiving. Many text editors provide this feature. If nothing else, use the W3C's validator.
- Reset it. Use something simple like
* { margin:0; padding: 0; }to help assure all browser are interpreting your markup the same way. You may even consider using Yahoo's CSS reset YUI library. - Use Firebug: Firebug has revolutionized CSS and Javascript development. Firefox's Firebug lets you click on any element on the page and see exactly which CSS rules apply. It even lets you change, add and remove CSS rules on the fly to test various possibilities.
- Use a CSS aware editor. I've started using MacRabbit's CSSEdit this year. The autocomplete as you type feature alone was worth the $40.
- Get everything perfect in one browser (probably Firefox) first and then test in other browsers.
- Set up an environment where you can test all major browsers quickly across platforms. For me this means running Parallels, Windows XP, and Ubuntu on my Mac. Windows users need to test on the Mac as well (or at the very least test on Safari for Windows). I recently shelled out hard-earned cash for for XP and Parallels - but if you are serious about CSS development, this is necessary.
- Use well established techniques like unordered lists for menus or well known equal height columns techniques. Why reinvent the wheel?
- Be aware and beware IE idiosyncrasies. IE usually causes the most headaches. Know about hasLayout, the peekaboo bug and the like. If you must, feed IE its own stylesheet via conditional comments.
- Use a code repository to allow rollback to an earlier version if you make a mistake.
These things have helped me in CSS development tremendously.
Delicious Links
Home Recording Network
- Download Cards Deliver Serious Profits to Musicians
- D’oh! How about those links?
- Sine Language - episode 093
- HMHS 123 - Rob Christensen
- IHR Episode #60 (Enhanced) - Copying Rod, Ranting Pianos, Laptops vs. Desktops (2008_07_17)
- Sonic TALK091 - Guys Love Luggage
- FaithTools Podcast Episode 19
- Thoughts on Fatherhood
Favorite Podcasts
- Digital Flotsam Podcast 67 - God Bless The Child
- Griddlesode-S3-013: The Frosh Curve
- Digital Flotsam Podcast 66 - Fear of Flying
- Drupal Podcast No. 60: Zero to 60 in 60 Minutes
- Digital Flotsam Podcast 65 - Who'd Believe It?
- Digital Flotsam Podcast 64 - The Legacy of Geeks
- Drupal Podcast No. 59: SimpleTest
- Of Q and Women
- Digital Flotsam Podcast 63 - Caution Epiphany Ahead
- SuperHuman Times: "Dashing" - Act 3

Small correction to my last
Submitted by rainer (not verified) on Tue, 05/20/2008 - 07:12.Small correction to my last message: It's @import not @include, sorry (too much C programming lastly :-))
And a pretty good example for an initial @import is the "css reset" (you'll find lot's about it).
And last but not least: The @imports must be the first statements in your css-file, or else they will be ignored. That's not a fortune and gives us some bad restrictions when structuring code in files.
Test for clients without CSS/JavaScript/vision
Submitted by Matthew Davidson (not verified) on Thu, 05/15/2008 - 00:06.A validator will tell you whether your code is well-formed and not using any non-standard or deprecated elements or attributes, but it can't tell you whether your markup is semantically correct.
A useful quick test is to view your site in a text-mode web browser like links or elinks. This will at least tell you that your content is comprehensible without the benefit of CSS, JavaScript, or images, and hence is accessible to the visually-impaired. Remember, the user of arguably the most importance to most websites - Google - is visually impaired.
Harder to test for is whether you have selected the right HTML element for the right purpose. For example a list of links displayed inline is still a list. It may be less work to just stick them in a paragraph, and it will pass an automated validation test, but it's also less semantic metadata that may be useful to you in some way in the future. Are all your headings in heading elements? And do all your heading elements contain actual headings? Are your CSS class and id names semantic ("menu", "author", "last modified", etc.), or presentational ("blue", "large", "left", etc.)?
These are the sorts of questions you just have to keep in your mind while marking up, and there are plenty of instances where there is no definitively correct answer. I find it's useful to be in computer programmer / librarian mode when marking up; what possible machine-executed tasks might someone one day want to do with this information, and what semantic hooks using standard (X)HTML (and possibly microformats) should I provide to make this possible?
I could not get IE7 to work in IE4Linux
Submitted by Geoff (not verified) on Wed, 05/14/2008 - 14:04.thus parallels and XP
ies4linux
Submitted by Drupal Theme Garden (not verified) on Tue, 05/13/2008 - 22:15.Instead of using vmware server, if you are using linux, you could use ies4linux ( http://http://www.ies4linux.org/ ) or if you are using Mac, ies4OSX ( http://www.kronenberg.org/ies4osx/ ).
Ies4Linux/Ies4OSX allows users to run Internet Explorer versions from 5.0 to 7.0 on Linux or OSX.
Reset
Submitted by elv (not verified) on Tue, 05/13/2008 - 12:12.Reseting all styles with a star rule is a bit too much for my taste, it brings its own problems sometimes (like on selects in Firefox) and it can make the CSS rendering a bit sluggish on slower computers.
There are other interesting resets apart from the Yahoo UI you link to, like the reset by Eric Meyer.
But my favorite is Initial by Faruk Ateş, It doesn't force you to redefine everything, instead it just sets a few robust default styles.
I'd like to add some of my
Submitted by rainer (not verified) on Tue, 05/13/2008 - 09:33.I'd like to add some of my thoughts / best practices:
(4) Use i.e. the eclipse PDT, that gives you auto-completion and auto-formating.
(6) On Linux, use vmware server for your testing-envs. It's free and easy to operate.
and a new one:
Use more than just one css file and @include them where it makes sense. I.e. I usually have a separate color.css where I define all colors.
So far from me...
Rainer
Semicolons
Submitted by Hanan Cohen (not verified) on Tue, 05/13/2008 - 04:13.Add a semicolon at the end of every property even if it is the last one of the style. This way, when you will want to add another one, you will get it right the first time.