12

Colocar // no início de uma linha cria uma propriedade inválida, ou seja, o CSS ignora essa linha.

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

Sei que o padrão do CSS é utilizando /* */, mas qual o problema que posso encontrar utilizando dessa maneira?

3
  • Considerando a resposta do bigown, não está respondida a dúvida? Ele mostrou quais problemas podem ocorrer se você usar esse artifício, mesmo no início da linha.
    – bfavaretto
    Commented 8/01/2015 às 18:09
  • 2
    Eu entendi a pergunta e a resposta foi dada para todas as pessoas que vão ler aqui. É assim que se faz um site de Q&A, respondemos para ajudar a todos e não só a quem pergunta. Mas se o entendimento está errado, você pode dizer o que esperava. Eu falei que é errado por que não está na especificação e pode lhe dar problema no futuro. Seu irmão :P deu um exemplo de como usar corretamente e mais alguma precaução a tomar e o bfavaretto mostro que há um caso diferente do que você postou que dá problema. Assim se constrói o conhecimento de forma colaborativa.
    – Maniero
    Commented 8/01/2015 às 18:29
  • @bigown sim, acredito que esperei algo mais interessante de resposta, mas vi que a sua resposta pareceu ser a mais explicativa e me pareceu a mais correta também. Agradeço pela atenção dedicada. :)
    – Rigotti
    Commented 8/01/2015 às 18:36

4 Respostas 4

19

Hoje não causa problema. Mas e amanhã? Você não deve usar nada que não está na especificação justamente porque ela não é future proof. Se usar isto e no futuro a especificação dizer que isto serve para outra coisa ou mesmo algum navegador resolver fazer por conta própria, você está lascado e a culpa será sua.

Já vi muito software parar de funcionar quando muda a versão do sistema operacional. Quase sempre a culpa é do programador que não seguiu a especificação, ele fez o que pareceu funcionar. Funciona até o dia que não funciona mais. Aí ele fala mal do Bill Gates.

Lembre-se que estar inválido é bem diferente de determinar que a informação é apenas um comentário. Mesmo dando o mesmo resultado você está fazendo errado e poderá pagar um preço por isto. Mesmo que você não saiba qual é ele. Então nunca use algo errado.

BTW, o exemplo citado é chamado comment out, uma técnica que normalmente deve ser evitada, principalmente em código de produção.

Documentação.

Coloquei no GitHub para referência futura.

11

Complementando as demais respostas: esse seu exemplo não dá problema porque é no início da linha, mas no final pode dar um problemão. Por exemplo:

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

Nesse caso a regra do border seria totalmente ignorada. Como os outros já disseram, use os comentários conforme a especificação, ou seja, sempre /* */.

1
  • Se ele queria um entendimento pra "estudos", esta resposta com certeza mostra bem o tipo de dor de cabeça +1.
    – Syzoth
    Commented 30/12/2015 às 15:49
11

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>

1
  • 1
    +1 Excelente resposta + ótimos exemplos. +1 pela referência. O OP podia reconsiderar escolher essa como resposta correta. Commented 9/01/2015 às 4:36
10

Comentários em CSS com // não existem. A sintaxe correta é usar /* */ em todos os casos.

Comentário de uma linha:

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

Comentário de n linhas:

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

A princípio não deve haver nenhum problema. A precaução que costuma-se tomar ao usar esse tipo de comentário é se atentar a fechar todas as tags abertas.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .