<div id="example-value">ou <div id="example_value">?
Este site e o Twitter usam o primeiro estilo. Facebook e Vimeo - o segundo.
Qual você usa e por quê?
Respostas:
Use hífens para garantir o isolamento entre seu HTML e JavaScript.
Por quê? ver abaixo.
Os hifens são válidos para uso em CSS e HTML, mas não para objetos JavaScript.
Muitos navegadores registram IDs de HTML como objetos globais no objeto janela / documento, em grandes projetos, isso pode se tornar uma verdadeira dor.
Por esse motivo, uso nomes com hífens, dessa forma, os IDs de HTML nunca entrarão em conflito com meu JavaScript.
Considere o seguinte:
message.js
message = function(containerObject){
this.htmlObject = containerObject;
};
message.prototype.write = function(text){
this.htmlObject.innerHTML+=text;
};
html
<body>
<span id='message'></span>
</body>
<script>
var objectContainer = {};
if(typeof message == 'undefined'){
var asyncScript = document.createElement('script');
asyncScript.onload = function(){
objectContainer.messageClass = new message(document.getElementById('message'));
objectContainer.messageClass.write('loaded');
}
asyncScript.src = 'message.js';
document.appendChild(asyncScript);
}else{
objectContainer.messageClass = new message(document.getElementById('message'));
objectContainer.messageClass.write('loaded');
}
</script>
Se o navegador registrar ids HTML como objetos globais, o código acima falhará porque a mensagem não é 'indefinida' e tentará criar uma instância do objeto HTML. Certificar-se de que um código HTML tem um hífen no nome evita conflitos como o mostrado abaixo:
message.js
message = function(containerObject){
this.htmlObject = containerObject;
};
message.prototype.write = function(text){
this.htmlObject.innerHTML+=text;
};
html
<body>
<span id='message-text'></span>
</body>
<script>
var objectContainer = {};
if(typeof message == 'undefined'){
var asyncScript = document.createElement('script');
asyncScript.onload = function(){
objectContainer.messageClass = new message(document.getElementById('message-text'));
objectContainer.messageClass.write('loaded');
}
asyncScript.src = 'message.js';
document.appendChild(asyncScript);
}else{
objectContainer.messageClass = new message(document.getElementById('message-text'));
objectContainer.messageClass.write('loaded');
}
</script>
Claro, você pode usar messageText ou message_text, mas isso não resolve o problema e você pode se deparar com o mesmo problema mais tarde, onde acidentalmente acessa um objeto HTML em vez de um JavaScript
Uma observação, você ainda pode acessar os objetos HTML através do objeto window (por exemplo) usando window ['mensagem-texto'];
window['message-text'];
Eu recomendaria o Guia de estilo HTML / CSS do Google
Ele afirma especificamente :
Separe as palavras no ID e nos nomes das classes com um hífen . Não concatene palavras e abreviações em seletores por quaisquer caracteres (incluindo nenhum), exceto hífens, para melhorar a compreensão e a digitalização.
/* Not recommended: does not separate the words “demo” and “image” */
.demoimage {}
/* Not recommended: uses underscore instead of hyphen */
.error_status {}
/* Recommended */
#video-id {}
.ads-sample {}
BEMnotação?
Na verdade, é uma questão de preferência, mas o que o influenciará em uma direção específica pode ser o editor com o qual você codifica. Por exemplo, o recurso de autocompletar do TextMate para em um hífen, mas vê as palavras separadas por um sublinhado como uma única palavra. Portanto, os nomes e ids das classes the_postfuncionam melhor do que the-postao usar o recurso de preenchimento automático ( Esc).
Eu acredito que isso depende inteiramente do programador. Você também pode usar o camelCase se quiser (mas acho que ficaria estranho.)
Eu pessoalmente prefiro o hífen, porque é mais rápido digitar no meu teclado. Portanto, eu diria que você deve escolher o que lhe convém, uma vez que ambos os exemplos são amplamente usados.
Qualquer um dos exemplos é perfeitamente válido, você pode até adicionar ":" ou "." como separadores de acordo com as especificações w3c . Eu pessoalmente uso "_" se for um nome de duas palavras apenas por causa de sua semelhança com o espaço.
ZZ:ZZdeve ter como escape ZZ\00003AZZ(CSS2 e superior).
Na verdade, alguns frameworks externos (javascript, php) têm dificuldades (bugs?) Em usar o hypen em nomes de id. Eu uso o sublinhado (assim como o 960grid) e tudo funciona muito bem.
Gostaria de sugerir sublinhado principalmente pelo motivo de um efeito colateral de javascript que estou encontrando.
Se você digitar o código abaixo em sua barra de localização, receberá um erro: 'valor-exemplo' é indefinido. Se o div fosse nomeado com sublinhados, funcionaria.
javascript:alert(example-value.currentStyle.hasLayout);document.getElementById("example-value"), o que funcionará bem.