<div id="example-value">o <div id="example_value">?
Questo sito e Twitter utilizzano il primo stile. Facebook e Vimeo: il secondo.
Quale usi e perché?
Risposte:
Utilizza i trattini per garantire l'isolamento tra HTML e JavaScript.
Perché? vedi sotto.
I trattini sono validi per l'uso in CSS e HTML ma non per gli oggetti JavaScript.
Molti browser registrano gli ID HTML come oggetti globali sull'oggetto finestra / documento, in grandi progetti, questo può diventare un vero problema.
Per questo motivo, utilizzo nomi con trattini in questo modo gli ID HTML non entreranno mai in conflitto con il mio JavaScript.
Considera quanto segue:
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 il browser registra gli ID HTML come oggetti globali, quanto sopra fallirà perché il messaggio non è "indefinito" e proverà a creare un'istanza dell'oggetto HTML. Assicurandosi che un ID HTML abbia un trattino nel nome, si evitano conflitti come quello di seguito:
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>Ovviamente, potresti usare messageText o message_text ma questo non risolve il problema e potresti incappare nello stesso problema in seguito in cui potresti accedere accidentalmente a un oggetto HTML invece di uno JavaScript
Un'osservazione, puoi ancora accedere agli oggetti HTML tramite l'oggetto finestra (ad esempio) usando window ['message-text'];
window['message-text'];
Consiglierei la guida di stile HTML / CSS di Google
Separare le parole nell'ID e nei nomi delle classi con un trattino . Non concatenare parole e abbreviazioni nei selettori con caratteri (incluso nessuno) diversi dai trattini, al fine di migliorare la comprensione e la possibilità di leggerezza.
/* 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 {}BEMnotazione?
Dipende davvero dalle preferenze, ma ciò che ti influenzerà in una particolare direzione potrebbe essere l'editor con cui codifichi. Ad esempio, la funzione di completamento automatico di TextMate si ferma su un trattino, ma vede le parole separate da un trattino basso come una singola parola. Quindi i nomi delle classi e gli ID con the_postfunzionano meglio rispetto a the-postquando si utilizza la sua funzione di completamento automatico ( Esc).
Credo che questo dipenda interamente dal programmatore. Potresti usare anche camelCase se lo desideri (ma penso che sembrerebbe imbarazzante).
Personalmente preferisco il trattino, perché è più veloce da digitare sulla tastiera. Quindi direi che dovresti scegliere ciò con cui ti senti più a tuo agio, poiché entrambi i tuoi esempi sono ampiamente utilizzati.
Entrambi gli esempi sono perfettamente validi, puoi persino inserire nel mix ":" o "." come separatori secondo la specifica w3c . Personalmente uso "_" se è un nome di due parole solo per la sua somiglianza con lo spazio.
ZZ:ZZdovrebbe essere sottoposto a escape come ZZ\00003AZZ(CSS2 e versioni successive).
In realtà alcuni framework esterni (javascript, php) hanno difficoltà (bug?) Nell'uso dell'ipen nei nomi degli id. Uso il carattere di sottolineatura (così fa 960grid) e tutto funziona alla grande.
Suggerirei di sottolineare principalmente per il motivo di un effetto collaterale di javascript che sto riscontrando.
Se dovessi digitare il codice di seguito nella barra degli indirizzi, riceverai un errore: "valore-esempio" non è definito. Se il div fosse denominato con trattini bassi, funzionerebbe.
javascript:alert(example-value.currentStyle.hasLayout);document.getElementById("example-value"), che funzionerà bene.