Benennung der HTML-Attribute "Klasse" und "ID" - Bindestriche vs. Unterstreichungen [geschlossen]

113

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

Diese Seite und Twitter verwenden den ersten Stil. Facebook und Vimeo - der zweite.

Welches benutzt du und warum?

html coding-style naming-conventions Emanuil Rusev
quelle
11
Beide Links sind jetzt defekt
Steve

Antworten:

135

Verwenden Sie Bindestriche, um die Isolation zwischen HTML und JavaScript sicherzustellen.

Warum? siehe unten.

Bindestriche können in CSS und HTML verwendet werden, jedoch nicht für JavaScript-Objekte.

Viele Browser registrieren HTML-IDs als globale Objekte im Fenster- / Dokumentobjekt. In großen Projekten kann dies zu einem echten Problem werden.

Aus diesem Grund verwende ich Namen mit Bindestrichen, damit die HTML-IDs niemals mit meinem JavaScript in Konflikt geraten.

Folgendes berücksichtigen:

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>

Wenn der Browser HTML-IDs als globale Objekte registriert, schlägt das oben Gesagte fehl, da die Nachricht nicht "undefiniert" ist und versucht wird, eine Instanz des HTML-Objekts zu erstellen. Indem Sie sicherstellen, dass eine HTML-ID einen Bindestrich im Namen enthält, werden Konflikte wie der folgende verhindert:

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>

Natürlich könnten Sie messageText oder message_text verwenden, aber dies löst das Problem nicht und Sie könnten später auf dasselbe Problem stoßen, bei dem Sie versehentlich auf ein HTML-Objekt anstelle eines JavaScript-Objekts zugreifen würden

Eine Bemerkung: Sie können weiterhin über das (zum Beispiel) Fensterobjekt auf die HTML-Objekte zugreifen, indem Sie window ['message-text'] verwenden.

Raatje
quelle
Ich verstehe etwas über Ihren Beitrag hier nicht, vielleicht können Sie das klarstellen. Sie sagen also, dass einige Browser die HTML-IDs als globale Objekte registrieren und dass Sie, wenn Sie einen Bindestrich in die ID einfügen, garantieren, dass es keinen Konflikt zwischen diesen automatisch generierten und den von Ihnen erstellten Objekten gibt, da Bindestriche nicht zulässig sind . Aber wie erstellt der Browser diese Objekte mit Bindestrich, wenn Bindestriche nicht zulässig sind? Es scheint, als müsste es sie entfernen, sodass Sie das Potenzial eines Namenskonflikts haben.
Dallas Caley
@ DallasCaley, wenn Sie nicht gesehen haben, war diese Antwort Update-Aufrufwindow['message-text'];
Chris Marisic
Ah, ich glaube ich verstehe. Seltsamerweise können Sie mit Javascript kein Objekt mit einem Bindestrich im Namen als eigenständiges Objekt erstellen, aber Sie können ein Objekt mit einem Bindestrich im Namen erstellen, wenn es als Eigenschaft eines anderen Objekts erstellt wird das hat keinen Bindestrich im Namen.
Dallas Caley
Dieser Beitrag hat mich tatsächlich veranlasst, meine Position in eine fast 100% ige Übereinstimmung mit Ihnen zu überdenken, von einer Position aus, die nicht dumm ist. Mein einziger Vorbehalt ist Ihre Position zu dem Thema. Es scheint offensichtlich, dass jede ID ein - enthalten sollte, um das zu verhindern Das gleiche Problem, es sei denn, Sie möchten ausdrücklich, dass es für bestimmte IDs funktioniert.
user254694
87

Ich würde den Google HTML / CSS Style Guide empfehlen

Es heißt ausdrücklich :

Trennen Sie Wörter in ID- und Klassennamen durch einen Bindestrich . Verketten Sie Wörter und Abkürzungen in Selektoren nicht durch andere Zeichen (einschließlich keiner) als Bindestriche, um das Verständnis und die Scanbarkeit zu verbessern.

/* 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
quelle
1
Was ist mit BEMNotation?
Iulian Onofrei
1
@IulianOnofrei Sie können BEM natürlich kostenlos verwenden, aber es hält sich eindeutig nicht strikt an den Google Style Guide.
Klas Mellbourn
hmm, sehr komisch. Das GWT-Framework von Google verwendet Camelcase. Überprüfen Sie diese Codezeile <h1 id = "appTitle"> </ h1> im folgenden Dokument. gwtproject.org/doc/latest/tutorial/i18n.html
karlihnos
4
Google! = Automatisch richtig. Sie sind es oft, aber nur Google zu sein, reicht nicht aus.
Craig Brett
2
Das ist eine wirklich schlechte Idee. Früher oder später möchten Sie Ihren Namen in einer Programmiersprache verwenden, die keine Bindestriche in Variablennamen unterstützt (im Grunde alle), und dann BOOM! Idiotische Umbenennungsregeln.
Timmmm
5

Es kommt wirklich auf die Präferenz an, aber was Sie in eine bestimmte Richtung beeinflusst, könnte der Editor sein, mit dem Sie codieren. Beispielsweise stoppt die Funktion zur automatischen Vervollständigung von TextMate bei einem Bindestrich, sieht jedoch Wörter, die durch einen Unterstrich getrennt sind, als ein einzelnes Wort an. Klassennamen und IDs the_postfunktionieren also besser als the-postbei Verwendung der Funktion zur automatischen Vervollständigung ( Esc).

Doug Neiner
quelle
Sie haben Recht, aber es wird viel chaotischer in diesem umliegenden "HTML-Dschungel" erscheinen
Kamil Tomšík
4

Ich glaube, das liegt ganz beim Programmierer. Sie könnten auch camelCase verwenden, wenn Sie möchten (aber ich denke, das würde unangenehm aussehen.)

Ich persönlich bevorzuge den Bindestrich, weil er schneller auf meiner Tastatur eingegeben werden kann. Daher würde ich sagen, dass Sie sich für das entscheiden sollten, mit dem Sie sich am wohlsten fühlen, da beide Beispiele weit verbreitet sind.

adamse
quelle
3
Diese Frage ist ähnlich und überprüft diese Antwort stackoverflow.com/questions/70579/…
Matt Smith
2

Jedes Beispiel ist vollkommen gültig, Sie können sogar ":" oder "" in die Mischung werfen. als Trennzeichen nach w3c spez . Ich persönlich benutze "_", wenn es sich um einen Namen mit zwei Wörtern handelt, nur weil er dem Raum ähnlich ist.

Myles
quelle
14
Ja, Sie können Doppelpunkte und Punkte für IDs verwenden, aber das ist eine gute Möglichkeit, die Person, die die CSS-Datei schreibt, dazu zu bringen, Sie zu hassen.
Dave Markle
5
Ein HTML-Bezeichner ZZ:ZZmüsste als ZZ\00003AZZ(CSS2 und höher) maskiert werden.
McDowell
1
Ich habe nicht gesagt, dass es eine gute Praxis ist, ich habe gesagt, dass es gültig ist.
Myles
5
Klingt nach einer unterhaltsamen Möglichkeit, jQuery zum Explodieren zu bringen
Mike Robinson
0

Ich benutze die erste (eins-zwei), weil sie besser lesbar ist. Für Bilder bevorzuge ich jedoch den Unterstrich (btn_more.png). Camel Case (oneTwo) ist eine weitere Option.

eozzy
quelle
0

Tatsächlich haben einige externe Frameworks (Javascript, PHP) Schwierigkeiten (Bugs?) Mit der Verwendung des Hypen in ID-Namen. Ich benutze Unterstrich (960grid auch) und alles funktioniert super.

David Havl
quelle
3
Welche? Auf jeden Fall ist die Lesbarkeit des Codes viel wichtiger.
Kamil Tomšík
-1

Ich würde vorschlagen, vor allem wegen einer Javascript-Nebenwirkung, auf die ich stoße, einen Unterstrich zu machen.

Wenn Sie den folgenden Code in Ihre Standortleiste eingeben, wird eine Fehlermeldung angezeigt: 'Beispielwert' ist undefiniert. Wenn das div mit Unterstrichen benannt würde, würde es funktionieren.

javascript:alert(example-value.currentStyle.hasLayout);
jgreep
quelle
5
Das sollte sein document.getElementById("example-value"), was gut funktionieren wird.
Chuck
Ich erhalte ein ähnliches Problem mit ASP.NET MVC, wenn ein Wert für ein Attribut im Parameter HtmlAttributes der HTML-Hilfsfunktionen angegeben wird.
Matthijs Wessels