Web developer Drew Miller offers a better solution which addresses the drawbacks I mentioned and more. Get it now: DD_belatedPNG.

Recently Google software engineer Matt Cutts set the record straight in a short video:

This discussion would be incomplete if we ignored how important headings are for accessibility. Here is a YouTube video from Aaron Cannon, a blind accessibility consultant, demonstrating this concept using JAWS, a screen reader:

Clearly, there are good reasons to use h1s for top level headings, but it all comes down to what is best for the document. Just be aware of the results. An example is how many of us, myself included were taught that marking up a logo using h1 was the right thing to do. It’s not. It will not help with site rank and will cause screen readers to read it out loud on every single page. So my personal opinion is to stick to using h1s for top level headings and the intarweb will be a happier place

A brief intro to subclasses

CSS allows for an unlimited number of space-delimited classes:

<div class="class1 class2 ect">
     <p>...content...</p>
</div>

The order of the classes doesn’t matter but its always a good idea to first list the base class followed by the subclass. It’s much easier to read that way.

The problem

You are inviting trouble when you rely on subclasses (especially for structure) throughout your markup. Consider the following extreme case which I recently encountered on a project:

<div class="line breather gradient-top">
     <p>...content...</p>
</div>

The CSS:

div.line {
  ...rules...
}
div.breather {
  ...rules...
}
div.gradient-top {
  ...rules...
}

That’s 3 sets of different rules in the stylesheet for one element! What a mess! (There are more serious issues like not separating content and presentation, but that is beyond the scope of this post). There is another method using dot notation that could have been used to chain the subclasses- http://www.w3.org/TR/CSS21/selector.html#class-html. Either way is more complicated than need be.

The solution

A better approach would be to use a single class selector that is meaningful. Let’s assume the content to be styled is the main content. Naming the class selector “mainContent” gives the markup meaning making it easier to read and edit:

<div class="mainContent">
     <p>...content...</p>
</div>

The CSS for the previous element is now located in a single set:

div.mainContent { 
     ...rules...
}

Of course, there will be situations where using subclasses makes sense. Just be aware of the consequences of relying on them.

To briefly summarize the benefits of using a single meaningful selector:

• Your markup and stylesheet will be cleaner, easier to read and understand
• Maintenance will be easier for yourself and especially others
• Saves time/money

Happy coding.

On the light bulb: “I have not failed. I have just found 10,000 ways that won’t work” - Thomas Edison

“My great concern is not whether you have failed, but whether you are content with your failure.” - Abraham Lincoln

The Design Brief

I kickoff every project with the all important logo design brief. The logo design brief is where I will ask you many, many questions about the details of your business, services, products and much more. We go about this by either a face-to-face meeting or by filling out my questionnaire via e-mail.

Giving me clear, focused answers is crucial because they will guide my decisions throughout the process. It’s always important to give me more information than too little. Inspiration and insight can come from the most unexpected places and the more information I have the better the result will be.

Research & Discovery

Armed with the design brief I begin researching your target audience, competition, industry trends, history and overall goals. My goal is to discover a meaningful approach to the project that will generate results. During this crucial step, we also seek out a desired style, discuss what inspires us and come to an agreement on an approach.

Sketching

With a pencil and paper I start sketching out concepts using the design brief and research I’ve done. (Resist the urge to go straight to the computer to develop concepts. Whatever software you use will place constraints on your creativity.) This is where concepts are tossed around and experimented on. Sometimes the results are good and sometimes not (don’t let your drawing ability discourage you. Instead focus on generating concepts and ideas.)  Once I feel I have some solid concepts, I move on to creating prototypes using Adobe Illustrator cs3.

Concept Design

This step is where everything comes together into a polished concept. After I have 2 fairly polished concepts, I take a short break. I revisit the concepts the next day with fresh eyes and make any changes I deem necessary. I take a break because I find that staring at a design I miss what I can discover with a fresh set of eyes. For even more insight, I’ll sometimes ask other professional designers to critique them. Once the concepts are looking pretty good, I prepare them for presentation and review.

I prefer to showcase 2 at a time, because it allows me to focus on 2 really good concepts instead of spreading my creativity thin by doing more. This is where my process may differ from others.

Presentation & Review

I provide you with a PDF showcasing the concepts along with the reasoning behind the decisions I’ve made. This is your opportunity to reflect on the concepts and give me useful feedback. Resist feedback such as “I’ll know it when I see it” or “I want to be in love with it”. If you have trouble putting your thoughts into words, let me know.

Revisions

Although uncommon, there are times when the initial concept is a smashing success and no revisions are necessary. If they are necessary, I’ll revise the logo based on your feedback and send them back to you for review.

Deliver

Once the revisions are complete and the logo is finalized, it is delivered via e-mail. I prepare the logo in the EPS file format (or whatever format you require),  provide some basic instructions and a receipt for your records. After receiving the logo please feel free to ask any questions.  I also appreciate any feedback on how the logo has worked out for you so don’t hesitate to drop me an occasional line.

Celebration

I work hard to design the best logo for your business so when all is said and done, I make sure to reward myself. I do that by drinking an ice cold microbrew (India Pale Ale of course).

Thanks for taking a look and I hope you gained some insight into my process. I am available for hire. If you’re interested, get in touch!

I use sIFR for nearly all my headings on this site. On the work page I use it 24 times. As a result, Firefox and Safari were was having a problem with multiple renderings of sIFR causing my cpu to jump to 100%. The page would load fine but once I scrolled up or down the cpu cycles jumped and would freeze the browser. The problem was the default 30fps for the sIFR flash component. To reduce the cpu load, simply lower the fps to 12. At 12fps, the cpu usage is still on the higher side but at least sIFR now plays nice with FF and Safari. Edit: sIFR 3 r382 and beyond has a framerate of 12ps so simply upgrading should also fix the problem.

Thanks to Den Odell for the fix!

Table of Contents

Similar to how a book is organized into chapters you can do the same with your CSS. Put the table of contents, which is basically a run down of the structure, at the beginning of your stylesheet. At a glance anyone looking at your code can get an idea of the overall structure:

/*
Table of Contents:
global
page Structure
nav
headings
link Styles
text Styles
inline Imgs
tables
forms
extras
*/

Sections

If you’ve ever had the unfortunate task of making changes to a 1000+ line stylesheet, you know that swimming in code can be overwhelming. Well, there’s a nice technique to visually separate the code into logical sections that are searchable. Note: Having = in front of each section allows you to target that section and not bits of your code when you do a search. Very helpful.

/* -----------------------------------*/
/* ---------->> =global <<------------*/
/* -----------------------------------*/

…all global styles go under this section

/* -----------------------------------*/
/* ----->> =page structure <<---------*/
/* -----------------------------------*/

…all page structure styles go under this section

Do this for each section listed in your table of contents.

Indentation

It’s also helpful to visually show parent sibling relationships when scanning code. I’ve found that it’s best to stay within 2-3 levels or it can quickly get out of control. Below is an example:

#nav {
float: right;
margin: 1px 20px 0 0;
}
    #nav li {
    float: left;
    padding: 0 20px 0 0;
    }
        #nav li a {
        text-decoration: none;
        font-size: 1.4em; 
        color: #f3f3f3;
        float: left;
        display: block;
        padding: 22px 0 0 0;
        }
        #nav li a:hover {
        color: #7da5b7;
        }

It’s now very clear that #nav is the parent and each indented selector represents a sibling.

You can also use indentation to show other relationships. Below, cite and .quote share the same rules except for clear: right;. To easily show this exception, try using an indent.

cite, .quote {
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
}
    .quote {
    clear: right;
    }

Multiple Stylesheets

Another way to organize your css is to separate a single stylesheet into say 2 or 3. You could do it by organizing it into layout.css, type.css and color.css. The organization benefits are clear but there are some drawbacks. One, calling multiple stylesheets increases the number of server requests. For larger sites with heavy traffic, the additional server requests can hinder performance. Two, having multiple sheets can become overwhelming when doing edits.

Hopefully I’ve given you some new ideas on how to better structure your css. Not only will you benefit by saving time (and your sanity) but so will others who read your code.