Css comments with // instead of /* */

Question

Place // at the beginning of a line creates an invalid property, i.e., CSS ignores that line.

div {
    background-color: cyan;
    // background-color: red;
}

I know the CSS standard is using /* */, but what problem can I find using in this way?

Answer 1

Today cause no problem. But what about tomorrow? You should not use anything that is not in the specification precisely because it is not Future Proof. If you use this and in the future the specification says that this is for something else or even some browser decide to do on its own, you are chipped and the fault will be yours.

I’ve seen a lot of software stop working when you change the OS version. Almost always the fault is the programmer who did not follow the specification, he did what seemed to work. It works until the day it no longer works. Then he badmouths Bill Gates.

Remember that being invalid is quite different from determining that information is just a comment. Even giving the same result you are doing wrong and you can pay a price for it. Even if you do not know what it is. So never use something wrong.

BTW, the cited example is called comment out, a technique that should normally be avoided, mainly in production code.

Documentation.

Answer 2

Comments on CSS with // do not exist. The correct syntax is to use /* */ in all cases.

One line comment:

body {
    /* margin: 0; */
    padding: 0;
}

Comment from n lines:

/* body {
    margin: 0;
    padding: 0;
} */

Shouldn’t be a problem at first. The precaution you usually take when using this type of comment is to try to close all open tags.

Answer 3

Complementing the other answers: this example does not give problem because it is at the beginning of the line, but at the end can give a problem. For example:

div {
    background-color: cyan;
    background-color: red; // isto não é um comentário
    border: 2px solid green;
}

In this case the rule of border would be totally ignored. As others have said, use the comments as per the specification, ie always /* */.

Answer 4

To fill in a little bit of everything that’s already been said, and hopefully not creating any redundancy of information, the big reason why we can’t break the rule when it comes to WEB development, particularly with HTML, CSS and Javascript, is that the code we create will be interpreted by a browser, this browser that is development only and exclusively on the standards created for each language.

Not enough the various problems we have with the development of code that will behave in the same way in the different browsers, if we develop code that works by a "mere chance", the thing becomes even more complicated.

Examples

Based on the code of your question, the // to flag a comment follow 3 practical cases, where the first one is just to highlight the correct way to identify a comment in CSS so that the browser knows what to do, the other two examples being an illustration of potential problems:

Example 01 - Correct Use

A scenario with comments within what the browsers expect to receive because the standard so says, where we can observe various methods to apply comments and all of them valid:

/* texto de aviso grave */
p {
  color: red; /* vermelho */
  text-transform: uppercase;
}

/*
 * A partir daqui seguem estilos para a conta do utilizador
 * -------------------------------------------------------- */
p {
  font-size: 2em;
}

<p>Super BuBu</p>

Example 02 - Ignored Statement

Comment incorrectly that will cause the browser to ignore the statement, because according to CSS standards any error will result in the ignored statement.

In the example, the browser will ignore everything from the // until the close of the declaration which is identified by the character }:

// texto de aviso grave
p {
  color: red; /* vermelho */
  text-transform: uppercase;
}

/*
 * A partir daqui seguem estilos para a conta do utilizador
 * -------------------------------------------------------- */
p {
  font-size: 2em;
}

<p>Super BuBu</p>

Example 03 - CSS compression, ignored statement and invalid comment is in the resulting code

Assuming I used server-side code to get all the CSS in one line, which also takes comments, a technique known as compression.

As at the beginning I have a comment with //, the same will stay in the code after compressed, and I will still lose the first statement, this because the CSS compressor will not collect the // as the identification of a comment:

If you pass the CSS of example #2 by this tool, Online CSS Minifier/Compressor, the result is what we can see in the example below:

// texto de aviso grave p{color:red;text-transform:uppercase}p{font-size:2em}

<p>Super BuBu</p>