One of the most annoying aspects of doing xhtml and css development is having to juggle multiple files — structure must go to an html file, and style to a css file. We separate it, of course, because keeping style and content as far away from each other is the only way to keep site maintenance sane.

However, when you’re first developing those styles, it’s a pain to have to keep multiple files open at once, constantly paging back and forth between both documents. And it’s more than just an annoyance — the time you end up wasting time going back and forth all day adds up.

Whistle while you work

I found a very simple solution to the two file problem. Do it all in the html file. Just add a style block directly above the block you’re applying new style to. You save yourself from constantly switching back and forth between files — it’s all there in one screen. Here’s an example:

When you’ve completed a certain section, you can grab the block of css and cut and paste it into a formal style sheet. An added benefit is that it forces you to bind your styles more closely to the ids and classes in your code*.

*While it’s good practice to keep shared styles to the core html entities like p, a, h1, and so forth, I find that scoping style tightly to logical blocks of html (with divs and classes) makes things easier to understand later, even if you end up repeating a few similar styles). YMMV.