Question 271758 in CSS Question posted in
Some basic documentation can be found here.

CSS commenting problem in VS Code. If I try to comment out a block of code with some already commented out, it results in errors

#p1 {
    background-color: grey;
    width: 80px; 
    border-style: solid;
    /* color: white; */
    border-color: gold;
    /* font-size: 30px; */
    width: 200px;  
    height: 150px;
    /* display: inline-block; */
    margin: auto;
    position: relative;
}

If I comment out the above code, it results in errors:

/* #p1 {
    background-color: grey;
    width: 80px; 
    border-style: solid;
    /* color: white; */
    border-color: gold;
    /* font-size: 30px; */
    width: 200px;  
    height: 150px;
    /* display: inline-block; */
    margin: auto;
    position: relative;
} */

I have to manually uncomment the commented-out code before I can comment out the whole block of code without getting errors.

What if there’s 100 lines of code and 50 of them are commented out, spread out in different places? Is manually uncommenting 50 lines of code a good move just to comment out 100 lines of code?

enter image description here

Tags:

3

Answers


  1. 0

    The reason you’re experiencing errors when trying to comment out the entire block of code is due to nested comments within the CSS code. In CSS, comments should be enclosed with /* */. If you nest comments within another comment, it can lead to issues as you’ve described.

    To comment out the entire block without errors, you should remove the nested comments and use a single set of comment delimiters, like this:

    /* #p1 {
    background-color: grey;
    width: 80px; 
    border-style: solid;
    color: white;
    border-color: gold;
    font-size: 30px;
    width: 200px;  
    height: 150px;
    display: inline-block;
    margin: auto;
    position: relative;
} */
    Login or Signup to reply.
  2. 0

    You used /* in a /* but when you write /*, CSS waiting for the first */ to end comment text and considers everything between these symbols as comment. correct way should be like this.

    /* #p1 {
    background-color: grey;
    width: 80px; 
    border-style: solid;
    /* color: white; 
    border-color: gold;
    /* font-size: 30px; 
    width: 200px;  
    height: 150px;
    /* display: inline-block;
    margin: auto;
    position: relative;
} */

    Or this:

    /* #p1 {
    background-color: grey;
    width: 80px; 
    border-style: solid;
    color: white; 
    border-color: gold;
    font-size: 30px; 
    width: 200px;  
    height: 150px;
    display: inline-block;
    margin: auto;
    position: relative;
} */
    Login or Signup to reply.
  3. 0

    In order to avoid having to manually remove all the commented lines, you can use a VSC extension, like this one, to help you out. This extension will remove all comments within the code you select when using CTRL + /. After this, you can simply comment out the rest of your code without issue.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search