Attribution d'un nom aux attributs HTML «classe» et «id» - tirets ou soulignements [fermé]

114

<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?

html coding-style naming-conventions Emanuil Rusev
la source
11
Ces deux liens sont maintenant rompus
Steve

Réponses:

136

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 dans CSS et 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 grands projets, cela peut devenir une vraie douleur.

Pour cette raison, j'utilise des noms avec des traits d'union de cette façon les identifiants HTML n'entreront jamais en conflit avec mon 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, ce qui précède échouera car le message n'est pas «indéfini» et il essaiera de créer une instance de l'objet HTML. En vous assurant qu'un identifiant HTML a un trait d'union dans le nom, vous évitez les conflits comme celui ci-dessous:

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 accéderiez 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'];

Raatje
la source
Je ne comprends pas quelque chose à propos de votre message ici, peut-être pouvez-vous clarifier. Donc, vous dites que certains navigateurs enregistrent les identifiants html en tant qu'objets globaux et que si vous mettez un trait d'union dans l'identifiant, vous garantissez qu'il n'y aura pas de conflit entre ces objets générés automatiquement et ceux que vous créez car les tirets ne sont pas autorisés . Mais comment alors le navigateur crée-t-il ces objets avec trait d'union si les traits d'union ne sont pas autorisés? semble devoir les dépouiller, vous laissant ainsi le potentiel d'un conflit de nom.
Dallas Caley
@DallasCaley si vous n'avez pas vu, cette réponse était une mise à jour appelantwindow['message-text'];
Chris Marisic
Ah je pense que je comprends. Étrange que javascript ne vous permette pas de créer un objet avec un tiret dans le nom en tant qu'objet autonome, mais il vous permettra de créer un objet avec un tiret dans le nom s'il est créé en tant que propriété d'un autre objet qui n'a pas de tiret dans le nom.
Dallas Caley
Ce message m'a en fait amené à repenser ma position en un accord presque à 100% avec vous à partir d'une position de non qui est stupide, ma seule réserve étant donnée votre position sur la question, il semble évident que chaque identifiant devrait avoir un - pour empêcher le même problème à moins que vous ne vouliez spécifiquement que cela fonctionne pour certains identifiants particuliers.
user254694
87

Je recommanderais le guide de style HTML / CSS de Google

Il déclare spécifiquement :

Séparez les mots dans les noms d'ID 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 du tout) autres que des tirets, afin d'améliorer la compréhension et la numérisation.

/* 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 {}
Klas Mellbourn
la source
1
Et la BEMnotation?
Iulian Onofrei
1
@IulianOnofrei, vous êtes bien sûr libre d'utiliser BEM, mais il ne respecte clairement pas strictement le Google Style Guide.
Klas Mellbourn
hmm, très bizarre. Le framework GWT de Google utilise camelcase. Vérifiez cette ligne de code <h1 id = "appTitle"> </h1> dans le document suivant. gwtproject.org/doc/latest/tutorial/i18n.html
karlihnos
4
Google! = Automatiquement à droite. Ils le sont souvent, mais le simple fait d'être Google ne suffit pas à justifier.
Craig Brett
2
C'est une très mauvaise idée. Tôt ou tard, vous voudrez utiliser votre nom dans un langage de programmation qui ne prend pas en charge les traits d'union dans les noms de variables (essentiellement tous), puis BOOM! Règles de renommage idiotes.
Timmmm
5

C'est vraiment une question de préférence, mais ce qui vous influencera dans une direction particulière pourrait être l'éditeur avec lequel vous codez. Par exemple, la fonction de saisie semi -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. Ainsi, les noms de classe et les identifiants the_postfonctionnent mieux que the-postlors de l'utilisation de sa fonction de saisie semi-automatique ( Esc).

Doug Neiner
la source
vous avez raison mais cela semblera beaucoup plus désordonné dans cette «jungle html» environnante
Kamil Tomšík
4

Je crois que cela dépend entièrement du programmeur. Vous pouvez également utiliser camelCase si vous le souhaitez (mais je pense que cela aurait l'air 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 avec quoi vous êtes le plus à l'aise, puisque vos deux exemples sont largement utilisés.

Adamse
la source
3
cette question est similaire et vérifie cette réponse stackoverflow.com/questions/70579/…
Matt Smith
2

Les deux exemples sont parfaitement valables, vous pouvez même jeter dans le mix ":" ou "". comme séparateurs selon la spécification w3c . J'utilise personnellement "_" s'il s'agit d'un nom à deux mots simplement à cause de sa similitude avec l'espace.

Myles
la source
14
Oui, vous pouvez utiliser des deux points et des points pour les identifiants, mais c'est un bon moyen d'amener la personne qui écrit le fichier CSS à vous détester.
Dave Markle
5
Un identifiant HTML ZZ:ZZdevrait être échappé comme ZZ\00003AZZ(CSS2 et supérieur).
McDowell
1
Je n'ai pas dit que c'était une bonne pratique, j'ai dit que c'était valide.
Myles
5
Sonne comme une façon amusante de faire exploser jQuery
Mike Robinson
0

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

éozzy
la source
0

En fait, certains frameworks externes (javascript, php) ont des difficultés (bogues?) À utiliser l'hypen dans les noms d'identifiant. J'utilise un trait de soulignement (tout comme 960grid) et tout fonctionne très bien.

DavidHavl
la source
3
Lesquels? Quoi qu'il en soit, la lisibilité du code est bien plus importante.
Kamil Tomšík
-1

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'adresse, vous obtiendrez une erreur: «exemple-valeur» n'est pas défini. Si le div était nommé avec des traits de soulignement, cela fonctionnerait.

javascript:alert(example-value.currentStyle.hasLayout);
jgreep
la source
5
Cela devrait être document.getElementById("example-value"), ce qui fonctionnera très bien.
Chuck
J'obtiens un problème similaire avec ASP.NET MVC lors de la spécification d'une valeur pour un attribut dans le paramètre HtmlAttributes des fonctions d'assistance Html.
Matthijs Wessels