<div id="example-value"> o <div id="example_value">?Denominazione degli attributi HTML "class" e "id": trattini o sottolineature
Questo sito e Twitter utilizzano il primo stile. Facebook e Vimeo - il secondo.
Quale usi e perché?
Utilizzare i trattini per garantire l'isolamento tra codice HTML e JavaScript.
Perché? vedi sotto.
I trattini sono validi per l'uso in CSS e HTML ma non per oggetti JavaScript.
Un sacco di browser registrano gli ID HTML come oggetti globali sulla finestra/oggetto del documento, nei grandi progetti, questo può diventare un vero dolore.
Per questo motivo, utilizzo i nomi con Hyphens in questo modo gli ID HTML non entreranno mai in conflitto con il mio JavaScript.
Si consideri il seguente:
messaggio.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 ids HTML come oggetti globali di cui sopra non riuscirà perché il messaggio non viene 'indefinito' e cercherà di creare un'istanza della Oggetto HTML. Facendo in modo un id HTML ha un trattino nel nome impedisce conflitti come quello qui sotto:
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>
Naturalmente, si potrebbe usa messageText o message_text ma questo non risolve il problema e potresti incorrere nello stesso problema più tardi in cui accedevi accidentalmente ad un oggetto HTML anziché a uno JavaScript
Un'osservazione, è ancora possibile accedere agli oggetti HTML tramite l'oggetto della finestra (ad esempio) utilizzando la finestra ['message-text'];
Non capisco qualcosa del tuo post qui, forse puoi chiarire. Quindi tu dici che alcuni browser registrano l'id html come oggetti globali e che se inserisci un trattino nell'id allora garantirai che non ci saranno conflitti tra questi oggetti generati automaticamente e quelli che creerai perché i trattini non sono consentiti . Ma in che modo il browser crea questi oggetti sillabati se i trattini non sono consentiti? sembra come se dovesse spogliarli, lasciandoti così il potenziale di un conflitto di denominazione. –
@DallasCaley se non hai visto, questa risposta era aggiornamento chiamando 'window ['message-text'];' –
Ah penso di averlo capito. Strano che javascript non ti permetta di creare un oggetto con un trattino nel nome come un oggetto autonomo, ma ti permetterà di creare un oggetto con un trattino nel nome se è creato come una proprietà di un altro oggetto quello non ha un trattino nel nome. –
Credo che tutto dipenda dal programmatore. Puoi usare anche CamelCase se vuoi (ma penso che sembrerebbe imbarazzante.)
Personalmente preferisco il trattino, perché è più veloce da digitare sulla tastiera. Quindi direi che dovresti andare con quello che ti è più comodo, dal momento che entrambi i tuoi esempi sono ampiamente utilizzati.
questa domanda è simile e verifica questa risposta http://stackoverflow.com/questions/70579/what-is-a-valid-value-for-id-attributes- in-html –
Entrambi gli esempi sono perfettamente validi, è possibile anche inserire nel mix ":" o "." come separatori secondo w3c spec. Personalmente uso "_" se si tratta di un nome in due parole solo per la sua somiglianza con lo spazio.
Sì, puoi usare i due punti e i punti per gli ID, ma è un buon modo per convincere la persona a scrivere il file CSS per odiarti. –
Un identificatore HTML 'ZZ: ZZ' dovrebbe essere salvato come' ZZ \ 00003AZZ' (CSS2 e sopra). – McDowell
Non ho detto che era una buona pratica, ho detto che era valida. – Myles
Vorrei suggerire il segno di sottolineatura principalmente per il motivo di un effetto collaterale javascript che sto incontrando.
Se dovessi digitare il codice di seguito nella barra degli indirizzi, verrà visualizzato un errore: "valore-esempio" non è definito. Se il div fosse chiamato con caratteri di sottolineatura, funzionerebbe.
javascript:alert(example-value.currentStyle.hasLayout);
Questo dovrebbe essere 'document.getElementById (" esempio-valore ")', che funzionerà correttamente. – Chuck
Ricevo un problema simile con ASP.NET MVC quando si specifica un valore per un attributo nel parametro HtmlAttributes delle funzioni helper Html. –
Io uso il primo (uno-due) perché è più leggibile. Per le immagini però preferisco il trattino basso (btn_more.png). Camel Case (oneTwo) è un'altra opzione.
Si tratta davvero di preferenze, ma ciò che ti influenzerà in una particolare direzione potrebbe essere l'editor con cui si codifica. Ad esempio, la funzione di completamento automatico di TextMate si interrompe in un trattino, ma vede le parole separate da un trattino basso come una singola parola. Pertanto, i nomi delle classi e gli ID con the_post funzionano meglio di the-post quando si utilizza la funzione di completamento automatico (Esc).
hai ragione, ma sembrerà molto più confuso in quella "giungla html" che circonda –
In realtà alcuni framework esterni (javascript, php) hanno difficoltà (bug?) Nell'utilizzo dell'ipen nei nomi id. Uso il carattere di sottolineatura (così fa 960grid) e tutto funziona alla grande.
Quali? Ad ogni modo, la leggibilità del codice è una cosa molto più importante. –
consiglierei il Google HTML/CSS Style Guide
Separare le parole nei nomi di identificazione e di classe da un trattino. Non concatenare le parole e le abbreviazioni nei selettori con caratteri (compresi quelli assenti) diversi dai trattini, al fine di migliorare la comprensione e la leggibilità.
/* 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 {}
Che dire della notazione ['BEM'] (http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax)? –
@IulianOnofrei sei naturalmente libero di usare BEM, ma chiaramente non aderisce rigorosamente alla Google Style Guide. –
hmm, molto strano. Il framework GWT di google utilizza Camelcase. Controlla questa riga di codice
nel seguente documento. http://www.gwtproject.org/doc/latest/tutorial/i18n.html – karlihnos
Entrambi tali collegamenti sono ora interrotti – Steve