Geoff Hankerson

  • portfolio
  • contact
  • fda podcast
  • drupal
  • articles
  • blog

Web developer, Podcaster and Drupal Specialist. Subscribe to the Fundamentals of Digital Audio podcast. Subscribe to the Drupal Screencast Series.

Home › Blogs › admin's blog

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.

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. Get everything perfect in one browser (probably Firefox) first and then test in other browsers.
  6. 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.
  7. Use well established techniques like unordered lists for menus or well known equal height columns techniques. Why reinvent the wheel?
  8. 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.
  9. 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.

  • Blog
  • Drupal
  • admin's blog
  • Add new comment

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.

  • reply

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?

  • reply

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

  • reply

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.

  • reply

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.

  • reply

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

  • reply

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.

  • reply

Delicious Links

  • Adding Multilingual Subtitles to Videos in Drupal with the JW FLV Media Player | Development Seed (3)
  • SVN Repository Structure For Drupal Projects | WorkHabit.org
  • Feedbooks: Food for the mind (2)
  • Featured Mac Download: Integrate Subversion with Finder with SCPlugin
  • Hack Attack: How to set up a personal home Subversion server
  • Creating submit buttons with images | drupal.org (3)
  • Views Date Range Filter | drupal.org (3)
  • Drupal: An easy way to set up multiple sites on localhost (3)
  • InnerFade with jquery (2)
  • Web typography | Guide | Motive (2)
more

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
more

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
more
  • portfolio
  • contact
  • fda podcast
  • drupal
  • articles
  • blog