É má prática comentar linhas únicas de CSS com //?

Vejo que havia muita gente a queixar-se disto e, como esta é uma questão mais antiga, há provavelmente muita gente a lê-la a perguntar-se se ainda é verdade, ou se existe realmente um padrão em primeiro lugar. Permita-me esclarecer as coisas. As razões principais para a política rigorosa de comentários CSS são as seguintes:

#1 não é normal

Padronizado pelo menos desde o CSS 2.1, Os comentários só devem ser contidos em /* e */. Enquanto alguns os navegadores toleram, não deviam, e estão apenas a um centímetro de alguém a dizer "oh sim, isso não é normal" ou " Ei! Isso não é normal, arranja-o!"; e então adivinhem o que, seu código CSS, que estava funcionando, agora não funciona para milhares de pessoas (e pode já não ter trabalhado para centenas de outras). Vou acrescentar que <!-- e --> são permitidos mas apenas (e quero dizer apenas) quando aparecem dentro de um documento HTML, não em A.ficheiro de código css. Se o seu navegador é tão velho que não pode salta as etiquetas <style>, provavelmente está na hora de um novo navegador há 10 anos. Mesmo Lynx e outros navegadores de texto sabem não lê-los, por isso comentá-lo só é útil em situações muito isoladas onde o hardware e o software estão bloqueados no seu estado actual de funcionamento.

# 2 não é (muito) amigável entre plataformas

O Comentário de linha única, que começa em qualquer lugar de uma linha com {[[2]}, é terminado por 'newline' que é / não são uma plataforma cruzada padronizada carácter(s). Pior, alguns podem ter um personagem para uma nova linha, ou 2... e quando essas plataformas se misturam, uma nova linha pode ser perdida,e lá se vai o seu Exterminador...e alguns ou todos os seus códigos estão agora sendo comentados que não era suposto ser, você não tem que ser um gênio para saber quais as consequências disso pode ser, especialmente se você controlar recursos de seu site apenas através do CSS que muitos fazem.

O padrão é amigável e uniforme para todos.

O /* e */ os delimitadores serão sempre os mesmos caracteres em todos os computadores, independentemente da arquitectura, sistema operativo, etc.

# 4 as novas linhas são espaços em branco

A última razão (sim, há mais uma), caracteres newline são considerados(em CSS e muitas outras línguas) como espaços em branco, e */ não é espaços em branco, pois não? E se você pensar sobre isso neste ponto, deve ser bastante claro que você não deve estar usando um espaço em branco para terminar um comentário especialmente desde whitespace é e pode ser despojado por muitos parsers HTML/CSS, ou reformatado sem que você sequer saiba sobre isso.

#5 CSS != C / C++

Agora, se estás prestes a sair do teu lugar e gritar comigo sobre "ei, mas C++...", lembre-se que esses Compiladores e IDEs têm toneladas de verificação e detecção de newline incorporados neles para que eles possam levá-lo. A maioria dos compiladores não reformata o seu código a menos que seja perguntado, e muitos IDEs normalmente perguntar-lhe-ão que tipo de linhas novas o seu documento está a usar se não puder adivinha sozinho. Se fizéssemos isso com as páginas CSS para o usuário final cada vez que um fosse carregado, imagine o pesadelo que ele estaria tentando contornar. Além disso, o código C/C++ não é processado em tempo de execução e é compilado, então na maior parte do tempo, o usuário nunca recebe o documento em questão em primeiro lugar. Os arquivos fonte não estão sendo constantemente vistos por todo o mundo em centenas de plataformas e muitos sistemas operacionais, e um milhão de navegadores diferentes também. As observações são retiradas. antes de chegarem ao Utilizador Final. O código CSS vem direito ao navegador do Usuário e tem que ser muito resiliente sem saber o que está do outro lado, então a ressalva é que ele deve estar pronto para qualquer coisa que o usuário final tem ou faz, não qualquer coisa que o desenvolvedor faz ou tem!

#6 é inconveniente

Não, é muito irritante ter que digitar esse extra */, mas a culpa por isso vai principalmente para os desenvolvedores de software de edição CSS que não oferecem completação automática. Se utilizar um editor especializado que pode fazer isso, de preferência fora da caixa,então você vai descobrir que é tão fácil como usar //. Tenha o hábito de digitar /**/ e, em seguida, backspace 2, vai ajudá-lo a não esquecer e torna um pouco mais fácil. Melhor ainda, podes arranjar uma chave quente para te dar isso. O Windows e o Linux têm ferramentas poderosas para permitir isso (o KDE é muito bom para isso).

---

Espero que isto ajude toda a gente a entender o " porquê "por trás do "Como", e lembre-se que ... porque algo funciona para você, não significa que seja o padrão, e para resumir:

Sim, é uma má prática usá-lo, basta dizer não para a barra dupla!!! Se você precisa de uma ajuda visual para lembrá-lo deste fato importante, basta queimar esta imagem em sua mente (graças àqueles de vocês que não têm nada melhor para fazer, mas fazer imagens como esta):

---

PS: Se você realmente quer algo para reclamar para os que fazem / quebram Normas CSS (W3C, elbow), alguém começa uma discussão sobre quanto tempo e errado desnecessariamente o"!importante " palavra-chave é! Mas isso não faz parte desta pergunta, por isso não vou entrar nela.

Referências

• W3C: CSS 2.1 esboço de trabalho: caracteres de comentário.
• W3C: CSS syntax module level 3: railroad diagrams of parser-to-character interpretations.
• Estouro Da Pilha: Várias Pilhas Artigos transbordantes com praticamente o mesmo assunto que este.
• w3schools: CSS 3 syntax standard (que por sua vez referencia W3C).
• ponto de situação: anotação de sintaxe CSS em "not using double-slash".
• mozilla|mdn: o processamento de CSS 3 relaxado permite uma barra dupla nos ficheiros de entrada.

Li recentemente Este artigo o que lança muita luz sobre a prática de comentários em linha única na CSS.

O CSS permite-lhe usar // de certa forma. Não é bem um comentário de linha, mas um próximo comentário de construção . Isto é, sempre que você usar //, a próxima construção CSS - declaração ou bloco - será "comentada".

Então no seu excerto de código list-style-type:none é a próxima construção CSS e é comentada as.

li {
    float:left;
    //list-style-type:none;
    text-indent:0px;
}

Da mesma forma, no excerto do código abaixo

//@keyframes foo {
  from, to { width: 500px; }
  50% { width: 400px; }
}
@keyframes bar {
  from, to { height: 500px; }
  50% { height: 400px; }
}

A // comentará a primeira declaração @keyframes.

Se você tentar usar // apenas para escrever comentários na sua 'stylesheet', você tem que ter cuidado - o texto cru não é uma construção CSS, por isso ele vai olhar para além disso e comentar a próxima construção na sua página. Então, no trecho abaixo

// Do some stuff.
.foo { animation: bar 1s infinite; }

Isto vai comentar o bloco.

Você pode obter mais informações através do link artigo mencionado no início.

De acordo com o rascunho de trabalho, não há nada como um comentário de uma única linha.

Sim, acho que usar comentários simples no seu estado actual é uma má prática. Para começar, se você está trabalhando em um ambiente de equipe, então a manutenção / legibilidade do código é de extrema importância, e mesmo se você trabalha sozinho, escrever código sustentável ainda é uma boa prática, caso contrário, insanidade se seguirá.

Quando você começa a usar comentários de uma única linha tanto a manutenção como a legibilidade são impedidas, os marcadores de sintaxe dentro dos editores não destaque seu comentário, e vai se tornar difícil distinguir comentários de regras.

Além disso, Comentários simples e multi-linhas não são inclusivamente intercambiáveis, por exemplo, você não pode usar comentários de texto bruto sem usar um hack, ao invés disso você só pode comentar construções //.foo {...} ou regras .foo {//height:10px}.

Instância imutável:

ul.images {
    padding: 0;
    //static height value
    height: 270px;
    margin: 0 auto;
}
ul.images {
    padding: 0;
    /*static height value
    height: 270px;*/
    margin: 0 auto;
}

Agora permutáveis (devido a um construtor vazio hack):

ul.images {
    padding: 0;
    //static height value{};
    height: 270px;
    margin: 0 auto;
}
ul.images {
    padding: 0;
    /*static height value*/
    height: 270px;
    margin: 0 auto;
}

Enquanto usando o construtor {}; como um postfix irá trabalhar, ele faz IMO derrota o propósito de usá-lo, porque você vai usar mais caracteres; um comentário de várias linhas usa quatro caracteres, /**/, enquanto que um comentário de linha única com o hack usa cinco caracteres, //{};

A última ressalva dos comentários de uma única linha que ainda não foi mencionada, é que O Chrome as ferramentas de desenvolvimento irão esconder as regras comentadas, em vez de permitir que você as comuta.

Cromo ferramentas de desenvolvimento (comentário multi-linhas):

Ferramentas de desenvolvimento do cromo (comentário em linha única)):

Um bom caso de uso, IMO, para Comentários de linha única seria quando você precisa comentar-para fora um construtor inteiro, que é realmente longo (o exemplo não será).

Comentando um construtor inteiro

//ul.images {
    padding: 0;
    height: 270px;
    margin: 0 auto;
}

/*ul.images {
    padding: 0;
    height: 270px;
    margin: 0 auto;
}*/

Para finalizar, se você está tentando depurar algo durante o desenvolvimento, eu não vejo o mal em comentando-fora um construtor com comentários de linha única para eliminar um bug. Se estás a depurar, será temporário. Dito isto, não vejo nenhum caso de uso para o raw-text, então eu definitivamente não defenderia usá-los lá.

Eu recomendaria não comentar CSS como este quando não é necessário. Remova as coisas que você não precisa e envie para o seu repositório SVN ou GIT. Deixe - o fazer o seu trabalho e mantenha-se a par da história. Comentários acumulados como este tornam-se cruft que tornam o seu código mais difícil de ler e entender.

Uso // para' comentar ' linhas para dentro .ficheiros css a toda a hora. Porque Está ligado a um atalho em Vim, e esqueço-me sempre do que estou a editar. Em JavaScript é realmente útil comentar blocos de código, testar o código, e 'comentar em' o bloco de código novamente (atalhos, sim).

Mas quando eu arrumo o meu .ficheiro css, uso as seguintes construções para mover mais facilmente as declarações para dentro e para fora do âmbito:

.pin {
    /*
    position: absolute;
    background: url(buttons-3x3.png);
    background-color: red;
    */
    height:50px;
    width:150px;
    position: relative;
}


.shadow {
    margin-top: 25px;
    margin-left: 25px;
    margin-left: 60px;
    width:50px;
    height:50px;
    background: url(playground.png) -400px -100px;
    position: relative;
    position: absolute;
}

Em .pin Posso remover uma linha e adicioná-la ao área comentada e vice-versa. Em .shadow Eu apenas redeclare a mesma propriedade com um valor diferente.

É uma dor.

!importante

Como outros já disseram, usar uma barra dupla não é compatível com os padrões, mas se você realmente quer usá-la e quer ser compatível com os padrões e você tem o gcc instalado, você pode executar o seu CSS através de cpp -P Para remover toda barra dupla e /* ... * / comments from the CSS. Como um bônus, você pode usar macros, inclui e condicionamentos, e os comentários não são baixados pelo navegador (pequeno impulso de desempenho).

O único problema maior é usar etiquetas de id autónomas (i.e., #para { ... } onde o cpp vomita. Solução há o dobro do # (para##) e passar a saída através do sed, assim:

cpp -P site.cssin | sed -e 's/^##/#/' >site.css

Tenho a certeza que há pré-processadores orientados para CSS melhores, mas isto funcionou comigo.

Comment in HTML:

<!--........................-->
<!--  <input type="text" name="lastname">-->

Comentário em JavaScript:

Comentário em Linha Única:

Duas Barras,"//", à frente do Código:

//document.write("Try this");

Comentário em várias linhas:

<script type="text/javascript">
    <!--

    /* document.write("try this!");

    document.write("try this"); */
    //-->

</script>

Código de comentários em CSS:

/*
.tblemp {
color:red; }

*/

Mais detalhes

Apenas para adicionar algumas informações adicionais e confirmar a regra "apenas usar /* comentários". Um cliente que tem acesso à pasta do site apenas escolhe por si mesmo para comentar uma única linha usando isto:

//*  comment here   *//

Na verdade O cromado e O Safari irá ignorar qualquer coisa que siga esta linha; chamar-lhe-ia "assassino de CSS".

Para Os comentários da linha CSS , Eu uso:

.myDiv {
    @width:750px;  
}

Ou qualquer personagem que queiras (ou seja *@!ZZ) Assim, a propriedade torna-se desconhecida e não legível pela css.