CODEWITHSUNDEEP
csscomments
cantera
cantera

Reputation: 24995

CSS Nested Comments

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?

Upvotes: 53

Views: 16223

Answers (6)

Sedrik
Sedrik

Reputation: 2221

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 :)

Upvotes: 0

rtillery
rtillery

Reputation: 387

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>

Upvotes: 1

Kevin Reid
Kevin Reid

Reputation: 43753

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.

Upvotes: 58

Nicolas Thery
Nicolas Thery

Reputation: 2448

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 //

Upvotes: 4

bookcasey
bookcasey

Reputation: 40443

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.

Upvotes: 13

Dagg Nabbit
Dagg Nabbit

Reputation: 76736

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.

Upvotes: 9

Related Questions