Grow your CSS skills. Land your dream job.

Indent CSS Changes You Are Unsure About

Published by 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?

Comments

  1. Anders
    Permalink to comment#

    Source Control. Try subversion.

  2. Anders
    Permalink to comment#

    Oh. To fast, but this idea is not good. Not good at all.

  3. That’s an interesting idea Chris, I can see the benefits of being able to see quickly what I changed when, definitely.

    My one problem with this though is all the extra white space and comments, and how much that might effect page loading, considering the stylesheet is the first file read. I’m sure that it doesn’t have a massive effect though?

    What I would consider is having a ‘live’ version and a development version, the latter being where these changes are recorded, the former just looking normal.

    Alex

  4. Tomek
    Permalink to comment#

    You wil quickly end up with 5-level indentation and fabular, epic descriptions. Use source version control, definitely.

  5. You could use CSSEdit for the Mac. Enables you to set milestones/backups of your CSS files so you can go back to them at a later date.

  6. Adam
    Permalink to comment#

    I use indents for child tags etc, so if there are extra indents there will be some confusion, is it a child, or was it changed recently.

    The other problem is, when you make a new change do you remove the old indents, or will you be left lots of indents all over the place, making the page untidy. How long do you leave it before removing indensts?

    The second idea is much better as you can see that it is a change, but you don’t really need the indents then. The only problem is if there are a lot of changes it will become untidy and more difficult to read, and increase load times. (although the times may be insignificant now with faster speeds)

    This article did get me thinking about the idea, and got me thinking some sort of record is a good idea.

    In the future I will probably keep a record of changes in a completely separate file as a reference, that will not be uploaded, just stored on my PC. It will probably just be a .txt file.

    Thanks for the idea!

  7. Brian
    Permalink to comment#

    I once worked with people who commented and dated every change in their C++ source code. (This practice had started in the old days before they were using source control and persisted a bit longer than that.) Over time these comments added clutter to the code since nobody ever took them out. Most readers of the code didn’t care to know every single change that was made in its history. The larger the project, the more it makes sense to simply let source control do its job.

    On a smaller scale the strategy could be helpful, but the complexity threshold for when it makes sense to use source control is lower than many people think. Even a one-person task can benefit from a source control tool.

    BTW, I’m looking at this on IE7 and the indenting in the code is not showing up. In Google Reader it looks correct.

  8. Nice work with this. Commenting is important in PHP, javascript, and every other language — why not CSS?

  9. I always comment my CSS file. Not with a date or something but with the previous value. If I change margin or padding, I’ll add a comment with the previous value.

  10. Marcel Galema
    Permalink to comment#

    Not a good idea at all! You better start using version control software (e.g. subversion). Works for any file type, is much more secure, gives you (for text files) line-by-line comparisons of all modifications. And you can restore older versions, and much much more!

    And the best? It’s free!

  11. Permalink to comment#

    That’s actually pretty clever, I never thought about indenting changes. I don’t think I’d go so far as to comment them and I agree with one of the other comments that eventually your CSS would end up extremely cluttered. But indenting is simple and effective.

  12. Ivan
    Permalink to comment#

    I usually don’t have that kind of problems (for now), because in most of the cases I know what’s the problem, but I might start commenting my new or changed lines, thanks for the tips :).

  13. shag
    Permalink to comment#

    im all for commenting code. it is beyond useful. but svn should be used for everything. not real sure what you mean by large scale either. svn is perfect for everything…. big and small….

  14. I think the most amazing part of this article is the fact that your mom knows and uses the word “borked”.

  15. Permalink to comment#

    @david walsh

    For live files comments are a WASTE OF SPACE, they make your files bigger than they should be :),

    I always have 2 version of my files in SVN, commented (develop files) and uncommented, clean public files. It usually saves up to 20kb per file if i delete my comments..

  16. Brian
    Permalink to comment#

    That brings back memories of the old days; a coworker who worked in assembly language had both a commented and an uncommented source file listing all his variables. In order to build the program, a certain set of source files had to be present, and the version with the comments wouldn’t fit with all the other files on the 8-inch floppy disk!

  17. Permalink to comment#

    Sorry, but this is a really dumb idea. Source control is the answer you need. Indentation should be used to visualise the structure of your code, in a way which is consistent with the code’s current scope, not for some arbitrary level of when you last edited it. Subversion or similar will easily allow you to compare what changed between any two versions and easily help you undo what you did. Learn it, use it, and you won’t need hacks like this.

  18. Source control. Really. What you get with it? You put the actual comment of your change when you submit the change. You have diff abilities that will show you instantly what changed between two versions of the same file.

    Lots of comments go this way, and I agree with these. Over-indenting? You’ll soon get lost with too many indents. And it’s definitely not suitable for teamwork if you ever consider it.

  19. i happen to like the idea alot. i use something like this but its all comments based. the indentation is a really good idea.

  20. Permalink to comment#

    I’ll do it the same way.
    I’ll go even further to outdent “highly risky” lines – to find them even faster.

  21. Oh what a bunch of mindless people!!!

    Adding a comment or an indent in a file is not going to create heaps and heaps of extra file size. Most detailed CSS stylesheets are only 5-6 kbs anyway and if they are much bigger, you need to learn how to code properly.

    I think this, it is a good idea. It is better, less code and less size than adding comments.

  22. Sammy
    Permalink to comment#

    Hey this isn’t a bad idea if you’re working on your own code and don’t mind cleaning up. If you’re working with a team/professional setting, then cleanliness and source control would probably make more sense. I guess if it doesn’t apply to you, you already know it. I personally wouldn’t use the indenting for example because our team uses it to denote descendant selectors and random indenting would confuse things for us.

    @Jermayn – hmm I took a look at your blog and you don’t appear to have the qualifications to be calling anybody here ‘mindless’. I’d recommend learning how to constructively criticize.

  23. I’ve recently taken to commenting previous values of anything I change in my CSS file, and it wasn’t until I started reading the comments here that I realized that’s probably not the smartest way to go. Of course, my current project (an ajaxed overhaul of my band’s website) is still in development, so I’ll probably keep doing what I’m doing and then clean it up when I’m ready to launch. Or I may check out Subversion. Thanks for opening my eyes folks!

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".