49

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?

Community
  • 1
  • 1
cantera
  • 24,479
  • 25
  • 95
  • 138
  • 1
    I don't have an answer for this. But what I always do is draggin the nested end comment `/*` to end of my parent comment. I hope you use an IDE that supports dragging the text. AFAIK this is the easiest way. – Mohsen Dec 10 '11 at 21:35
  • @Mohsen - that's a helpful trick, thanks. Still a problem when there are multiple nested comments, but at least this helps for some. – cantera Dec 10 '11 at 21:45

6 Answers6

56

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.

Kevin Reid
  • 37,492
  • 13
  • 80
  • 108
11

CSS can't handle nested comments.

Using a CSS preprocessor like LESS or SASS, you can comment "silently" using

// this syntax

These won't show up in your final CSS.

bookcasey
  • 39,223
  • 13
  • 77
  • 94
8

Well, yes, the same "workaround" you linked for HTML comments would work here. Change inner */ to * / (with a space). There's really no way of nesting block comments.

Dagg Nabbit
  • 75,346
  • 19
  • 113
  • 141
  • I see what you mean about the workaround. Having to go back and remove the temporary extra space is almost as bad as toggling the nested comment altogether. – cantera Dec 10 '11 at 21:41
  • 1
    just use find replace/ set up a macro in your text editor. – systemaddict Sep 16 '16 at 07:16
  • Was about to answer but realise its similar. What I do is on the closing comments */ replace the * with something else like !/. You can quickly do it with find and replace (perhaps a find and replace on a new text editor window just for that code so and not to the whole document). – Laurence Cope May 12 '17 at 16:21
4

Nested comments is not supported by CSS. You can't do that because you don't know how browsers will read it.

You can use LESS (an extension to CSS) that allows the one line comment //

Simon
  • 31,675
  • 9
  • 80
  • 92
Nicolas Thery
  • 2,319
  • 4
  • 26
  • 36
1

A couple years late to the party, but I seem to have stumbled on a way that seems to allow a kind of nested comment...although, as an admitted NON expert, there may be issues.

It appears, if you just place an extra, undecorated set of braces around some css, the css inside, and even any uncommented text, is not recognized, at least by Chrome 58.0.3029.110 (64-bit):

Original (from an unrelated question and answer):

html, body, .container {
    height: 100%;
}
.container {
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    justify-content: center;
}

Fiddle

With the brackets:

html, body, .container {
    height: 100%;
}
{ extra braces...
.container {
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    justify-content: center;
}
/* ...act as comment? */ }

Fiddle

Kind of handy for dev work. The way I'm using this right now:

<style>

/* Use this */
    .class1 {
        /* stuff */
    }

{ /* But not this */
    .class1 {
        /* other stuff */
    }
}

</style>
rtillery
  • 367
  • 1
  • 10
  • 1
    The problem is that it my work in your browser, or even in all currently existing browsers, but possibly not in future browsers. It may still be useful for temporary short term when debugging. – Volker Siegel Oct 17 '21 at 12:42
  • maybe use {/* */} to make it more clear that this is sort of a comment – epeleg Jan 08 '23 at 10:16
0

A workaround that can be applied is to move the things that you want to comment into a separate file and use the @import statement to include that file. That include can then be commented at will. This made sense for me as I have some debug rules (setting borders on things) that are handy to be able to disable.

index.css

/*
@import 'debug.css';
*/

debug.css

* *:hover {
  border: 2px solid #89a81e;
} /* Solid Green */
* * *:hover {
  border: 2px solid #f34607;
} /* Solid Orange */
* * * *:hover {
  border: 2px solid #5984c3;
} /* Solid Blue */
* * * * *:hover {
  border: 2px solid #cd1821;
} /* Solid Red */
* * * * * *:hover {
  border: 2px dotted #89a81e;
} /* Dotted Green */
* * * * * * *:hover {
  border: 2px dotted #f34607;
} /* Dotted Orange */
* * * * * * * *:hover {
  border: 2px dotted #5984c3;
} /* Dotted Blue */
* * * * * * * * *:hover {
  border: 2px dotted #cd1821;
} /* Dotted Red */

Hope that helps someone :)

Sedrik
  • 2,161
  • 17
  • 17