<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?
Antworten:
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.
window['message-text'];
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 {}BEMNotation?
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).
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.
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.
ZZ:ZZmüsste als ZZ\00003AZZ(CSS2 und höher) maskiert werden.
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.
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);document.getElementById("example-value"), was gut funktionieren wird.