Writing good CSS

posted by Ishmael Sanchez on Jul 23, 2009

I'm the first to admit, I'm guilty of taking short cuts and writing sloppy CSS. Usually coding sloppy CSS is because of strict deadlines, budget limitations, or putting a band aid on something (Meaning quick fixes without rebuilding entire pages or sections). And of course you could say what about planning and time management? Ha, if you have ever worked with clients you understand things never go as planned. I've seen CEO's and PM's look at a design almost entirely complete and say, "I hate it, redo X, Y, and Z".

The points below will help you the day someone tells you to redo your entire CSS, again!

  • Be simple remove excess markup from your HTML

Extra divs, nuke them. <br class="clear" /> come on you are better than that. Having simple HTML pages will make you write better CSS and remove bloat from your HTML pages. And thinking about your HTML structure before you begin creating your CSS is something people don't do enough of.

Twice really, wow
What a shame
  • Have good naming conventions for divs and classes

A class called red link, not good. What if your red links needs to be blue suddenly? Try required, highlight, or caption. How about an id named centerizer? Yep I've seen it. Try using content top, primary box, header.

  • Write "nice code": indent and use meaningful comments

Standard indenting, doesn't matter how, but it should be uniform. Plus it's nice when it's all neat and lined up. Comments should explain your CSS when it's not obvious from the code.

For example font-size:0.875em; /* 14 */ doesn't really mean much

How about font-size:0.875em; /* 16px * .875 = 14px base font */, much nicer.

Post new comment

  • Allowed HTML tags: <em> <strong> <cite> <code> <ul> <ol> <li>
  • Lines and paragraphs break automatically.

More information about formatting options

By submitting this form, you accept the Mollom privacy policy.

Ishmael Sanchez