If you find yourself lost in the myriad of div’s and don’t s of CSS, having to refer back to your source HTML just to see where the heck you are in the structure, try this…

As you comment your CSS (which you’re doing, right?), break your CSS into chunks by grouping your CSS definitions by object type. That part should be a no-brainer.

/* Header */

From there, give yourself a nice short-hand reference to the objects in your HTML.


/* Header */
/* header > div#container > div#navigation > .tab > ul > li.foo > a.foo */

Now, you can just look up a few lines and see how the HTML is structured and define away! Ta-da!

Sure, this can add some kilobytes to your file size, and the document structure may change. But it could save you, and anyone else some trouble down the road. And yes, I’ve thrown in some HTML5 just to be complete in my example.