Question

Is there any way to nest comments in CSS?

For example, when I try to comment out the following two statements, the outer comment ends when it encounters the */ in the nested comment, leaving the rest of the first statement and second statement uncommented.

/*
    #container {
        width: 90%;     /* nested comment here */
        margin: 0 auto;
    }

    #container .class {
        width: 25%;
    }
*/

I run into this problem often when I want to try out a different styling technique that involves multiple statements.

I’m familiar with the CSS specification for comments and its rationale, but also know there’s a workaround for nesting HTML comments and am hoping there’s a similar hack for CSS.

Has anyone found a way to nest comments in CSS?

Answer 1

CSS does not have a nestable comment syntax.

You could instead wrap the rules in something which does nest, but will not match anything, such as a non-existent media type:

@media DISABLED {
    #container {
        width: 90%;     /* nested comment here */
        margin: 0 auto;
    }

    #container .class {
        width: 25%;
    }
}

This does have the caveat that it will not be obviously a comment (so it will not be removed by tools that remove comments), and will cause the browser to spend time on parsing it and finding that it doesn’t match. However, neither of these should be a problem for temporary development use, which is the usual reason one would want to comment out a large chunk simply.