Whenever I’m tinkering with CSS for experimental or debugging purposes, I usually end up adding a ton of properties to help me figure out how things fit together: weird background colours, borders, alternate fonts, etc. I don’t want to leave these properties in place when I put the CSS live, though. To mark a CSS property as a temporary/debug property, I outdent it, putting it at column 0 in the file:
.monkey{
position:absolute;
height:200px;
width:300px;
top:20px;
left:20px;
background:url(/images/monkey.jpg) no-repeat;
border:2px solid green;
z-index:10;
}If you diff your code and review your changes before you commit to your version control system (you do use a VCS, don’t you?), it’s often easy enough to spot a debug property, and fix it before you actually check it in. But sometimes the changes are subtle, and they slip through anyway. By outdenting properties, they remain visually obvious in your code even after accidentally pushing them to production.
Sometimes adding a property isn’t the right debugging technique. Sometimes you want to override a property instead — and set yourself a reminder to change it back when you’re done. Because later property values overrides earlier ones, this technique works just as well:
.fez{
position:absolute;
height:200px;
width:300px;
top:20px;
top:100px;
left:20px;
background:url(/images/fez.jpg) no-repeat;
z-index:10;
}You can do the same by commenting out the original property, of course, but I find the outdenting technique faster to clean up afterwards.