Thoughts on web development and technologies by Peter Gasston

Five essential CSS tips from top developers

The October 2007 issue of the UK web development magazine .net has an interesting feature this month where web professionals share their favourite tips for coding CSS. Here are the five tips, with links to read more about them.

  • Split your CSS

    Using the power of the cascade, running separate CSS files for different aspects of the site allows you to make changes quickly and easily. Mike Stenhouse’s Modular CSS is a good introduction to this.

  • Perform version control

    On smaller sites, it can be as simple as adding numbers or dates to your files; on larger projects, you might want to think about using a Wiki or even something like Subversion.

  • Reset browser style sheets

    This will eliminate the majority of cross-browser problems. But don’t just go for:

    * { margin: 0; padding: 0; }

    As this can cause more work for you. Instead try something like Yahoo!’s YUI reset or Eric Meyer’s Reset Reloaded.

  • Image replace

    Probably the most widespread technique in use today, although there’s still no bullet-proof way to do it. Mezzoblue has the best round-up of pure CSS techniques, while the sIFR method uses Flash and Javascript to give greater flexibility.

  • Code semantically

    The most important CSS tip is to write good HTML. The more descriptive and logical your code is, the easier it will be to provide full accessibility across multiple platforms; plus, you will have more hooks to apply style to. It even has its own acronym now: POSH.

The article goes into greater detail than I can here, so I recommend you pick it up where possible; it’s a consistently good read.

1 comment on
“Five essential CSS tips from top developers”

  1. jen [September 30th, 2007, 5:40 pm; Permalink]

    Good tips, thank you! I’m just getting started with CSS.

Leave a comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Search