Para completar um pouco tudo o que já foi dito, e na esperança de não estar a criar nenhuma redundância de informação, o grande motivo pelo qual não podemos fugir à regra no que respeita ao desenvolvimento WEB, particularmente com HTML, CSS e JavaScript, é que o código que criamos vai ser interpretado por um navegador, navegador esse que é desenvolvimento única e exclusivamente sobre as normas criadas para cada linguagem.
Já não bastante os diversos problemas que temos com o desenvolvimento de código que se venha a comportar da mesma maneira nos diferentes navegadores, se viermos a desenvolver código que funciona por um "mero acaso", a coisa torna-se ainda mais complicada.
Exemplos
Com base no código da tua pergunta, as //
para sinalizar um comentário seguem 3 casos práticos, onde o primeiro é apenas para salientar a forma correta de identificar um comentário em CSS para que o navegador saiba o que fazer, sendo os outros dois exemplos uma ilustração de potenciais problemas:
Exemplo 01 - Uso Correto
Um cenário com comentários dentro daquilo que os navegadores esperam receber pois a norma assim o dita, onde podemos observar diversos métodos para aplicar comentários e todos eles válidos:
/* 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>
Exemplo 02 - Declaração Ignorada
Comentário de forma incorrecta que vai levar o navegador a ignorar a declaração, porque de acordo com as normas de CSS qualquer erro vai resultar na declaração ignorada.
No exemplo, o navegador vai ignorar tudo desde a //
até ao fecho da declaração que é identificado pelo caractere }
:
// 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>
Exemplo 03 - Compressão do CSS, declaração ignorada e comentário inválido fica no código resultante
Assumindo que usei um código no lado do servidor para meter o CSS todo numa só linha, código esse que também retira comentários, técnica mais conhecida por compressão.
Como no início tenho um comentário com //
, o mesmo vai ficar no código após comprimido, e vou na mesma perder a primeira declaração, isto porque o compressor de CSS não vai recolher o //
como a identificação de um comentário:
Se passar o CSS do exemplo #2 por esta ferramenta, Online CSS Minifier/Compressor, o resultado é o que podemos ver no exemplo em baixo:
// texto de aviso grave p{color:red;text-transform:uppercase}p{font-size:2em}
<p>Super BuBu</p>