Coping with CSS

I have a confession – CSS drives me apeshit.  I’m much better at it than I used to be, but I swear there are times when I would rather have napalm in my eyes than look at one more nested

tag. One relatively simple technique that I use to help me cope, though, is gratuitous use of the background-color declaration.  For every significant element, I set the background-color to an obnoxious value like Fuchsia or Lime, which helps me visualize each element’s position, margins, and padding.  When the page is finished, I remove the unnecessary colors. CSS background-color example This is a tremendous help, since I try to avoid table-based layouts.  In the example above, data is displayed in a tabular, repeating fashion, but there is no table present.  I use a combination of
,
    , and

    to accomplish the layout, and position elements as appropriate, using colors to illustrate the application of the CSS box model.  Incidentally, this also prevents me from crying in my beer. Tools like the Web Developer Toolbar for Firefox and the Internet Explorer Developer Toolbar are also necessary tools for coping with a CSS crisis, but each require you to fiddle with their menus and controls before you can do anything on a page.  By using CSS’s native background-color, all you have to do is press F5 to immediately see the effect of any CSS changes you’ve made. It’s quick, it’s dirty, and it really scares the ponytails who don’t realize that the color scheme is only temporary.