web-dev-qa-db-fra.com

Nommer les attributs HTML "class" et "id" - tirets et soulignements

<div id="example-value"> ou <div id="example_value">?

Ce site et Twitter utilisent le premier style. Facebook et Vimeo - le second.

Lequel utilisez-vous et pourquoi?

htmlcoding-stylenaming-conventions
107
Emanuil Rusev

Utilisez des traits d'union pour assurer l'isolation entre votre HTML et JavaScript.

Pourquoi? voir ci-dessous.

Les traits d'union peuvent être utilisés en CSS et HTML, mais pas pour les objets JavaScript.

Beaucoup de navigateurs enregistrent les identifiants HTML en tant qu'objets globaux sur l'objet window/document. Dans les grands projets, cela peut devenir une véritable galère.

Pour cette raison, j'utilise des noms avec des traits d'union de cette façon, les identifiants HTML ne seront jamais en conflit avec mon code JavaScript.

Considérer 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, la procédure ci-dessus échouera, car le message n'est pas "non défini" et il essaiera de créer une instance de l'objet HTML. En s'assurant qu'un identifiant HTML comporte un trait d'union dans le nom, il évite les conflits comme celui-ci:

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 pouvez 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, où vous auriez accidentellement accès à un objet HTML au lieu d'un objet JavaScript.

Une remarque, vous pouvez toujours accéder aux objets HTML via (par exemple) l'objet window en utilisant window ['message-text'];

129
Raatje

Je recommanderais le Guide de style Google HTML/CSS

Il indique spécifiquement :

Séparez les mots dans les noms et les noms de classe par un trait d'union. Ne concaténez pas les mots et les abréviations dans les sélecteurs avec des caractères (y compris aucun du tout) autres que des traits d'union, afin d'améliorer la compréhension et la possibilité de lecture.

/* 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 {}
81
Klas Mellbourn

Cela revient vraiment à la préférence, mais ce qui va vous pousser dans une direction particulière pourrait être l'éditeur avec lequel vous avez codé. Par exemple, la fonctionnalité de saisie automatique de TextMate s'arrête à un trait d'union, mais voit les mots séparés par un trait de soulignement comme un seul mot. Donc, les noms de classe et les identifiants avec the_post fonctionne mieux que the-post lors de l'utilisation de sa fonction de saisie semi-automatique (Esc).

4
Doug Neiner

Je crois que cela dépend entièrement du programmeur. Vous pouvez aussi utiliser camelCase si vous le souhaitez (mais je pense que cela semblerait gênant.)

Personnellement, je préfère le trait d'union, car il est plus rapide de taper sur mon clavier. Je dirais donc que vous devriez choisir ce qui vous convient le mieux, car vos deux exemples sont largement utilisés.

3
adamse

Chaque exemple est parfaitement valide, vous pouvez même ajouter le mélange ":" ou "." comme séparateurs selon le w3c spec . Personnellement, j'utilise "_" s'il s'agit d'un nom à deux mots uniquement en raison de sa similitude avec l'espace.

2
Myles

J'utilise le premier (un-deux) parce que c'est plus lisible. Pour les images, je préfère toutefois le trait de soulignement (btn_more.png). Camel Case (oneTwo) est une autre option.

1
3zzy

En fait, certains frameworks externes (javascript, php) rencontrent des difficultés (bugs?) Pour utiliser le trait d'union dans les noms d'identifiant. J'utilise un trait de soulignement (tout comme la grille 960) et tout fonctionne très bien.

1
DavidHavl

Je suggérerais de souligner principalement pour la raison d'un effet secondaire javascript que je rencontre.

Si vous deviez taper le code ci-dessous dans votre barre d’emplacement, vous obtiendrez une erreur: 'example-value' n’est pas défini. Si la div était nommée avec des traits de soulignement, cela fonctionnerait.

javascript:alert(example-value.currentStyle.hasLayout);
0
jgreep