Essential Tips for Developing top Drupal Themes

As discussed in my prior post about developing solid webdesigns I will now list a few pointers you should consider when starting out developing a drupal theme based on a finished sketch.

Learn to use the theming system first

When starting out developing themes for drupal many developers are overwhelmed by the possibilities of the underlying theming system. The first reaction, especially if there is a deadline lurking around the corner, is to minimize interaction with drupal-specific parts and work with what you know: CSS and HTML.
My advice: For your first drupal theming project (or even later on) take your time, read a book or a few introductory articles about the drupal theming system and learn how it is done right. This will
1. increase the reusability of your code,
2. make your alterations less hack-ish
3. and decrease the amount of time you need when you have to implement specific functionality
It's work, but it will pay off soon.

Do it the drupal way (or suffer)

Don't hack around in existing themes - create a subtheme and learn how to cleanly overwrite existing functions and css. This is something you will need all the time. Also don't compromise on that - those are the 10 lines of css or php that will come back to haunt you later on - especially if you (like many web developers)  aren't that big on documenting your projects.

Get a good base theme

For your first drupal 7 theming efforts I recommend using the "Zen"-theme because of its well-done markup and css code. It will provide you with a well-structured starter theme and an initial layout that can be easily adapted to your needs.
If you want your page elements (like the  header) have a background that stretches to full screen width you may want to consider using the fusion base theme as it already has the necessary wrapping structure in place.

Structure your CSS

The base theme "Zen" tries to structure the css code with various separate css files. It proved rather valuable to use this strucure and create your own additional files for big, but rather independent, parts of your css code (For example an overlay, an especially elaborate content type with lots of individual styling and so on). This way you will keep your css code organized.

Minimize your CSS code with views and context

When starting out with drupal my css-files got bloated fast, because of the many css definitions I needed to theme views and other elements in drupal.
Views (since version 3) supports you by providing a way to assign css classes to many elements of a view display (for example a views row). This way you can create a generic class that takes care of styling your row display and reuse it in every view you have created and will create later on. This has already saved me tons of time in projects with many views and different displays and makes your css code much more logical and readable.
The context module provides the functionality to assign body classes based on various criteria like content type and page path (and many others). While many of those things are already present as matching body classes the ability to combine those can help you in creating more complex themes in a unified way. If you are just using it for theming, ditching context in favor of a few lines of php in your template.php file may be better.