<div id="example-value"> o <div id="example_value"> ?
Ce site et Twitter utilisent le premier style. Facebook et Vimeo - le second.
Lequel utilisez-vous et pourquoi ?
Réponses
Trop de publicités?
Utilisez des traits d'union pour assurer l'isolation entre votre HTML et votre JavaScript.
Pourquoi ? voir ci-dessous.
Les traits d'union sont valables pour les feuilles de style en cascade et le langage HTML, mais pas pour les objets JavaScript.
De nombreux navigateurs enregistrent les identifiants HTML en tant qu'objets globaux sur l'objet fenêtre/document. Dans les projets de grande envergure, cela peut devenir un véritable casse-tête.
C'est pourquoi j'utilise des noms avec des traits d'union. Ainsi, les identifiants HTML n'entreront jamais en conflit avec mon JavaScript.
Considérez ce qui suit :
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>Si le navigateur enregistre les identifiants HTML en tant qu'objets globaux, l'opération ci-dessus échouera car le message n'est pas "indéfini" et le navigateur tentera de créer une instance de l'objet HTML. En s'assurant que le nom de l'identifiant HTML comporte un trait d'union, on évite des conflits comme celui qui suit :
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>Bien sûr, vous pourriez utiliser messageText ou message_text, mais cela ne résout pas le problème et vous pourriez rencontrer le même problème plus tard en accédant accidentellement à un objet HTML au lieu d'un objet JavaScript.
Une remarque, vous pouvez toujours accéder aux objets HTML via l'objet window (par exemple) en utilisant window['message-text'] ;
Klas Mellbourn
Points
6771
Je recommande le Guide de style HTML/CSS de Google
Séparez les mots des noms d'identification et de classe par un trait d'union. . Ne pas concaténer les mots et les abréviations dans les sélecteurs par des caractères (y compris aucun) autres que des tirets, afin d'améliorer la compréhension et la scannabilité.
/* 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 {}
Doug Neiner
Points
34940
C'est une question de préférence, mais ce qui vous fera pencher dans une direction particulière pourrait être l'éditeur avec lequel vous codez. Par exemple, la fonction de saisie automatique de l'éditeur TextMate s'arrête à un trait d'union, mais considère les mots séparés par un trait de soulignement comme un seul mot. Ainsi, les noms de classe et les identifiants avec the_post fonctionnent mieux que the-post lors de l'utilisation de sa fonction d'autocomplétion ( Esc ).
adamse
Points
4458
Je pense que cela dépend entièrement du programmeur. Vous pourriez utiliser camelCase aussi si vous le souhaitez (mais je pense que cela aurait l'air maladroit).
Personnellement, je préfère le trait d'union, car il est plus rapide à taper sur mon clavier. Je dirais donc que vous devriez choisir ce avec quoi vous êtes le plus à l'aise, puisque vos deux exemples sont largement utilisés.
