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.
I don't see the point. It seems that using CSS comments means just temporarily removing some CSS code by "commenting it out". The benefit (over just temporarily deleting the code) is that the code can be restored by removing the comment delimiters, but it's still rather primitive.
Why not use e.g. Firefox Web Developer Extensions? Using them, you can edit your CSS code on the fly (without changing the actual CSS or HTML file) and see the effects immediately. You can also switch off stylesheets, which is very useful, since often you don't even know which stylesheet causes the problem.
Hi Jukka. thanks for the comment. the point is that some developers may not use Firefox as their default development browser, so this solution is more universal, though your comment correctly points out an excellent alternative.