Indent CSS Changes You Are Unsure About

Chris Coyier //

Sometimes the simplest little things can save you major headaches later. The kind of headache I am talking about here is when you make a change to a CSS file only to find out days later that it broke something on a part of your website you didn't notice at the time. It could be very obvious. You remember exactly what you did and can jump back in there and fix it. But what if you made a lot of changes that day, or you just simply can't remember?

When I do tinkering in my CSS files, I like to leave some indication behind of what I changed. Sometimes this could mean a large-scale system like subversion, or making a full site backup before you start making changes. If you don't feel like what you are about to do warrants that large of a step (I hope you are backing anyway though!), there are some "littler" techniques you might try to keep track of those changes.

As you have guessed from the title of this article, one of those little techniques is simply indenting new or changed lines in your CSS. For example:

#sidebar ul li a {
     display: block;
     background-color: #ccc;
          border-bottom: 1px solid #999;
     margin: 3px 0 3px 0;
          padding: 3px;
}

In this example you might be trying to spice up how the links look in your sidebar. To see how it looks, you give each of them a bit of padding and a bottom border to help separate them and let them breathe a bit visually. You save your changes, go look at your site, and bellissimo! It's beautiful! You go about your merry way until 3 days later you get an email:

"Hey Chris, you should take a look at your contact page, something is borked =P"
-Love, Mom

Uh oh. Looks like when you made that last round of changes, you forgot to look everywhere on your site to make sure everything went as planned. Now something is borked... but exactly was the change that caused the problem? That's where your indented lines come in. A quick glance down through your CSS file should reveal all of your last changes, and you can spot the problem lines.

Extending the idea

Just indenting is a very simple solution to this problem and has some obvious problems. For example, is the indented line brand new, or was something just changed in that line? If it was changed, what was it changed from? At what point do you "un-indent" the line?

The answers to those questions are up to you. Simply the indenting might be enough for you. If your CSS file is humungous, you don't trust yourself to be able to remember what you did, or are just one of those "better safe than sorry" types, you might want to extend this idea a little deeper:

#sidebar ul li a {
     display: block;
     background-color: #ccc;
          border-bottom: 1px solid #999; /* ADDED Apr. 9, 2008 */
     margin: 3px 0 3px 0;
          padding: 3px;  /* CHANGED Feb. 14, 2008 (Prev. 1px) */
}

So what do you all think? How do you handle this?