Good CSS practices to get into.

I just got around to reading an article I bookmarked a while back on webdesignerdepot.com to help improve your CSS code. It's a good read, I highly recommend it.

Here's a little synopsis:

Stay Organized

Use a logical structure in your code. Declare broadest items first, and get more specific as you go. The author recommends:

  • Resets & overrides
  • Links & type
  • Main layout
  • Secondary layout structure
  • Form elements
  • Miscellaneous

I am guilty of NOT doing it like this, but I will make an effort to start!

Title, date and sign

Include contact info so others can get a hold of you if they need help. I'm not sure how I feel about this. If someone needs help with the code, it's obviously not the author. What's my incentive to help someone else get paid to edit the code I wrote?

One little bit included in this section which I did find helpful was adding color "swatches" in the form of commented color hex codes at the top. I constantly find myself jumping from Dreamweaver to Photoshop to grab this info. Sticking it in the CSS would be a HUGE benefit to me.

Keep a template library

Strip out all site specific CSS from your next project, and use it as the start of your template library. Most developers carry certain elements of their sites from project to project. Don't re-write it every time. For example, all my sites are centered, and I like them pinned to the top of the browser. Also, I'll never see why image links get borders by default. My generic template would include these items.

Keep your CSS ids and classes generic, but meaningful. Instead of class=rightText, use something like class=textA. If you decide later on down the road that this text should move to the left, you'd only want to change the float for the class, but then the name would no longer make sense.

Make sense?

I don't buy this one either. If I were making that big of a change, it would most likely coincide with a total redesign anyway...

Hyphens instead of underscores

I think this should be law. This is good advice under all circumstances on the web. Period.

Don't repeat yourself

Group tags and use shortcuts. This makes sense, and gets easier with time. I really need to get better at this....

Efficient code makes everyone happy. Developers, clients, users, etc.

Optimize for lightweight style sheets

This really goes with the last item. On the web, size really does matter, and smaller code is always better.

Write your base for Gecko, then tweak for Webkit and IE

What works in Firefox will be easier to make work in Chrome and IE.

Validate

WSC's CSS Validator. Learn it. Live it. Love it.

Keep a tidy house

Use separate style sheets for browser specifics or conditional situations. Each case should have it's own sheet.