Using CSS comments for debugging

Unlike JavaScript, CSS has no notion of break points. Break points are an useful way to adopt a step-by-step approach to debugging. For example, in JavaScript you can write something like this:

var test = document.getElementById('test');
alert(test);
var items = test.getElementsByTagName('li');
alert(items);

In this case, you're simply checking whether specific nodes exist or not. In CSS, you can use comments for debugging. Suppose that you have a code like this:

#box {
  width: 200px;
  border: 1px solid green;
}
#box div {
  width: 190px;
  padding: 10px;
  background: silver;
  border: 2px solid red;
}

There's a problem here: the inner box overflows its container. Where's the problem? If you use CSS comments, you can do something like this:

#box div {
  width: 190px;
  padding: 10px;
  background: silver;
  /* border: 2px solid red; */
}

By removing the last rule with a comment, you make sure that this rule is actually causing the problem. For complex CSS, this is a really useful way to handle debugging.