<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
quelle
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
html
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
html
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.
quelle
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.
quelle
BEM
Notation?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_post
funktionieren also besser alsthe-post
bei Verwendung der Funktion zur automatischen Vervollständigung (Esc
).quelle
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.
quelle
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.
quelle
ZZ:ZZ
müsste alsZZ\00003AZZ
(CSS2 und höher) maskiert werden.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.
quelle
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.
quelle
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.
quelle
document.getElementById("example-value")
, was gut funktionieren wird.