Five essential CSS tips from top developers

Warning This article was written over six months ago, and may contain outdated information.

The Octo­ber 2007 issue of the UK web devel­op­ment mag­a­zine .net has an inter­est­ing fea­ture this month where web pro­fes­sion­als share their favourite tips for cod­ing CSS. Here are the five tips, with links to read more about them.

  • Split your CSS

    Using the pow­er of the cas­cade, run­ning sep­a­rate CSS files for dif­fer­ent aspects of the site allows you to make changes quick­ly and eas­i­ly. Mike Sten­house­’s Mod­u­lar CSS is a good intro­duc­tion to this.

  • Perform version control

    On small­er sites, it can be as sim­ple as adding num­bers or dates to your files; on larg­er projects, you might want to think about using a Wiki or even some­thing like Sub­ver­sion.

  • Reset browser style sheets

    This will elim­i­nate the major­i­ty of cross-brows­er prob­lems. But don’t just go for:

    * { margin: 0; padding: 0; }

    As this can cause more work for you. Instead try some­thing like Yahoo!‘s YUI reset or Eric Mey­er’s Reset Reloaded.

  • Image replace

    Prob­a­bly the most wide­spread tech­nique in use today, although there’s still no bul­let-proof way to do it. Mez­zoblue has the best round-up of pure CSS tech­niques, while the sIFR method uses Flash and Javascript to give greater flexibility.

  • Code semantically

    The most impor­tant CSS tip is to write good HTML. The more descrip­tive and log­i­cal your code is, the eas­i­er it will be to pro­vide full acces­si­bil­i­ty across mul­ti­ple plat­forms; plus, you will have more hooks to apply style to. It even has its own acronym now: POSH.

The arti­cle goes into greater detail than I can here, so I rec­om­mend you pick it up where pos­si­ble; it’s a con­sis­tent­ly good read.

3 comments on
“Five essential CSS tips from top developers”

  1. Good tips, thank you! I’m just get­ting start­ed with CSS.

  2. great tips mate but you should increase font size of headings.

  3. Oops, you’re right; I wrote this a while ago and it must have bro­ken when I cre­at­ed the new theme; I’ll update it when I get a moment.