Was ist die Standard-Namenskonvention für HTML / CSS-IDs und -Klassen?

Hängt es von der Plattform ab, die Sie verwenden, oder gibt es eine gemeinsame Konvention, die die meisten Entwickler vorschlagen / befolgen?

Es gibt mehrere Möglichkeiten:

1. id="someIdentifier"' - sieht ziemlich konsistent mit Javascript-Code aus.
2. id="some-identifier" - sieht eher aus wie HTML5-ähnliche Attribute und andere Dinge in HTML.
3. id="some_identifier" - sieht ziemlich konsistent mit Ruby-Code aus und ist immer noch eine gültige Kennung in Javascript

Ich dachte, # 1 und # 3 oben sind am sinnvollsten, weil sie besser mit Javascript spielen.

Gibt es eine richtige Antwort darauf?

Es gibt keinen.

Ich verwende ständig Unterstriche, da Bindestriche die Syntaxhervorhebung meines Texteditors (Gedit) durcheinander bringen, aber das ist meine persönliche Präferenz.

Ich habe all diese Konventionen überall gesehen. Verwenden Sie diejenige, die Sie für die beste halten - diejenige, die für Sie am besten / am einfachsten zu lesen und am einfachsten zu tippen ist, da Sie sie häufig verwenden werden. Wenn Sie beispielsweise Ihren Unterstrich auf der Unterseite der Tastatur haben (unwahrscheinlich, aber durchaus möglich), halten Sie sich an Bindestriche. Gehen Sie einfach mit dem, was für Sie am besten ist. Darüber hinaus sind alle drei Konventionen leicht lesbar. Wenn Sie in einem Team arbeiten, denken Sie daran, die vom Team festgelegte Konvention (falls vorhanden) einzuhalten.

Update 2012

Ich habe meine Programmierung im Laufe der Zeit geändert. Ich verwende jetzt camel case ( thisIsASelector) anstelle von Bindestrichen. Letzteres finde ich eher hässlich. Verwenden Sie alles , was Sie bevorzugen, was sich im Laufe der Zeit leicht ändern kann.

Update 2013

Es sieht so aus, als würde ich die Dinge gerne jährlich durcheinander bringen ... Nachdem ich zu Sublime Text gewechselt und Bootstrap für eine Weile verwendet habe, bin ich zu den Bindestrichen zurückgekehrt. Für mich sehen sie jetzt viel sauberer aus als un_der_scores oder camelCase. Mein ursprünglicher Punkt bleibt jedoch bestehen: Es gibt keinen Standard.

Update 2015

Ein interessanter Eckfall mit Konventionen ist hier Rust . Ich mag die Sprache wirklich, aber der Compiler wird Sie warnen, wenn Sie Dinge mit etwas anderem als definieren underscore_case. Sie können die Warnung deaktivieren, aber es ist interessant, dass der Compiler standardmäßig eine Konvention vorschlägt. Ich stelle mir vor, dass dies bei größeren Projekten zu saubererem Code führt, was keine schlechte Sache ist.

Update 2016 ( du hast danach gefragt)

Ich habe den BEM- Standard für meine zukünftigen Projekte übernommen. Die Klassennamen sind am Ende ziemlich ausführlich, aber ich denke, dass sie den Klassen und dem dazugehörigen CSS eine gute Struktur und Wiederverwendbarkeit verleihen. Ich nehme an BEM ist eigentlich ein Standard (so mein noa wird yesvielleicht) , aber es ist immer noch an Ihnen , was Sie den Einsatz in einem Projekt entscheiden. Am wichtigsten: Seien Sie konsequent mit dem, was Sie wählen.

Update 2019 ( Sie haben danach gefragt)

Nachdem ich eine Weile kein CSS geschrieben hatte, begann ich an einem Ort zu arbeiten, der OOCSS in einem seiner Produkte verwendet. Ich persönlich finde es ziemlich unangenehm, überall Wurfklassen zu haben, aber nicht immer zwischen HTML und CSS wechseln zu müssen, fühlt sich ziemlich produktiv an.

Ich bin immer noch auf BEM fixiert. Es ist ausführlich, aber der Namespace macht das Arbeiten damit in React-Komponenten sehr natürlich. Es eignet sich auch hervorragend zum Auswählen bestimmter Elemente beim Testen des Browsers.

OOCSS und BEM sind nur einige der CSS-Standards. Wählen Sie eine aus, die für Sie funktioniert - sie sind alle voller Kompromisse, weil CSS einfach nicht so gut ist .

Update 2020

Ein langweiliges Update in diesem Jahr. Ich benutze immer noch BEM. Meine Position hat sich aus den oben genannten Gründen seit dem Update 2019 nicht wirklich geändert. Verwenden Sie das, was für Sie funktioniert, das mit Ihrer Teamgröße skaliert und so viel oder so wenig von CSS 'schlechtem Funktionsumfang verbirgt, wie Sie möchten.

Es gibt einen CSS- und HTML-Styleguide von Google, der empfiehlt, immer einen Bindestrich zu verwenden: https://google.github.io/styleguide/htmlcssguide.html#ID_and_Class_Name_Delimiters .

Ich schlage vor, Sie verwenden einen Unterstrich anstelle eines Bindestrichs (-), da ...

<form name="myForm">
  <input name="myInput" id="my-Id" value="myValue"/>
</form>

<script>
  var x = document.myForm.my-Id.value;
  alert(x);
</script>

Auf diese Weise können Sie einfach über id auf den Wert zugreifen. Wenn Sie jedoch einen Bindestrich verwenden, wird ein Syntaxfehler verursacht.

Dies ist ein altes Beispiel, aber es kann ohne jquery funktionieren - :)

Dank @jean_ralphio gibt es eine Möglichkeit, dies zu vermeiden

var x = document.myForm['my-Id'].value;

Der Dash-Stil wäre ein Google-Code-Stil, aber ich mag ihn nicht wirklich. Ich würde TitleCase für id und camelCase für class bevorzugen.

tl; dr;

Es gibt keine wahre Antwort. Sie können einen der vielen auswählen oder Ihre eigenen Standards erstellen, je nachdem, mit wem Sie zusammenarbeiten. Und es ist 100% abhängig von der Plattform.

Ursprünglicher Beitrag

Nur noch ein alternativer Standard:

<div id="id_name" class="class-name"></div>

Und in Ihrem Skript:

var variableName = $("#id_name .class-name");

Dies verwendet nur camelCase, under_score und Silbentrennung für Variablen, IDs und Klassen. Ich habe über diesen Standard auf verschiedenen Websites gelesen. Obwohl in CSS / JQuery-Selektoren etwas redundant, erleichtern Redundanzen das Erkennen von Fehlern. Beispiel: Wenn Sie .unknown_nameoder #unknownNamein Ihrer CSS-Datei sehen, wissen Sie, dass Sie herausfinden müssen, worauf sich das tatsächlich bezieht.

UPDATE 2019

(Bindestriche heißen 'kebab-case', Unterstriche heißen 'snake_case' und dann haben Sie 'TitleCase', 'pascalCase')

Ich persönlich mag keine Bindestriche. Ich habe dies ursprünglich als eine Alternative gepostet (weil die Regeln einfach sind). Bindestriche erschweren jedoch die Auswahlverknüpfungen (Doppelklick, ctrl/ option+ left/ rightund ctrl/ cmd+ Din vsCode. Außerdem sind Klassennamen und Dateinamen der einzige Ort, an dem Bindestriche funktionieren, da sie fast immer in Anführungszeichen oder in CSS usw. Stehen Aber die Abkürzung gilt immer noch.

Neben Variablen, Klassennamen und IDs möchten Sie auch die Dateinamenkonventionen betrachten. Und Git Branches.

Die Codierungsgruppe meines Büros hatte tatsächlich vor ein oder zwei Monaten ein Meeting, um zu besprechen, wie wir die Dinge benennen würden. Für Git-Zweige konnten wir uns nicht zwischen 321-the_issue_description oder 321_the-issue-description entscheiden. (Ich wollte 321_theIssueDescription, aber meine Kollegen mochten das nicht.)

Ein Beispiel, um die Arbeit mit den Standards anderer Menschen zu demonstrieren ...

Vue.js hat einen Standard. Tatsächlich haben sie zwei alternative Standards für mehrere ihrer Artikel. Ich mag beide Versionen für Dateinamen nicht. Sie empfehlen entweder "/path/kebab-case.vue"oder "/path/TitleCase.Vue". Ersteres ist schwieriger umzubenennen, es sei denn, Sie versuchen ausdrücklich, einen Teil davon umzubenennen. Letzteres ist nicht gut für die plattformübergreifende Kompatibilität. Ich würde es vorziehen "/path/snake_case.vue". Bei der Arbeit mit anderen Personen oder bestehenden Projekten ist es jedoch wichtig, den bereits festgelegten Standard zu befolgen. Deshalb gehe ich mit Kebab-Case für Dateinamen in Vue, obwohl ich mich total darüber beschweren werde. Wenn Sie dies nicht befolgen, müssen Sie viele von vue-cli eingerichtete Dateien ändern.

Es gibt keine vereinbarte Namenskonvention für HTML und CSS. Sie können Ihre Nomenklatur jedoch um das Objektdesign herum strukturieren. Genauer gesagt, was ich Eigentümer und Beziehung nenne.

Eigentum

Schlüsselwörter, die das Objekt beschreiben, können durch Bindestriche getrennt werden.

Auto-neu-rechts abgebogen

Schlüsselwörter, die das Objekt beschreiben, können auch in vier Kategorien unterteilt werden (die von links nach rechts angeordnet werden sollten): Objekt, Objektdeskriptor, Aktion und Aktionsdeskriptor.

Auto - ein Substantiv und ein
neues Objekt - ein Adjektiv und ein Objektdeskriptor, der das Objekt detaillierter beschreibt,
gedreht - ein Verb und eine Aktion, die zum Objektrecht gehört
- ein Adjektiv und ein Aktionsdeskriptor, der beschreibt die Aktion im Detail

Hinweis: Verben (Aktionen) sollten in der Vergangenheitsform stehen (gedreht, getan, gelaufen usw.).

Beziehung

Objekte können auch Beziehungen wie Eltern und Kind haben. Die Aktion und der Aktionsdeskriptor gehören zum übergeordneten Objekt, sie gehören nicht zum untergeordneten Objekt. Für Beziehungen zwischen Objekten können Sie einen Unterstrich verwenden.

Auto-neu-rechts-gedreht_Rad-links-links-gedreht

• Auto-neu-rechts abgebogen (folgt der Eigentumsregel)
• Rad-links-links-links (folgt der Eigentumsregel)
• Auto-neu-rechts-gedreht_Rad-links-links-gedreht (folgt der Beziehungsregel)

Schlussbemerkungen:

• Da bei CSS die Groß- und Kleinschreibung nicht berücksichtigt wird, ist es besser, alle Namen in Kleinbuchstaben (oder Großbuchstaben) zu schreiben. Vermeiden Sie Kamel- oder Pascalfälle, da diese zu mehrdeutigen Namen führen können.
• Wissen, wann eine Klasse und wann eine ID verwendet werden muss. Es geht nicht nur darum, dass eine ID einmal auf der Webseite verwendet wird. Meistens möchten Sie eine Klasse und keine ID verwenden. Webkomponenten wie (Schaltflächen, Formulare, Bedienfelder usw.) sollten immer eine Klasse verwenden. IDs können leicht zu Namenskonflikten führen und sollten sparsam für den Namensraum Ihres Markups verwendet werden. Die oben genannten Konzepte von Besitz und Beziehung gelten für die Benennung von Klassen und IDs und helfen Ihnen, Namenskonflikte zu vermeiden.
• Wenn Ihnen meine CSS-Namenskonvention nicht gefällt, gibt es auch einige andere: Strukturelle Namenskonvention, Präsentationsbenennungskonvention, Semantische Namenskonvention, BEM-Namenskonvention, OCSS-Namenskonvention usw.

Ein weiterer Grund, warum viele Bindestriche in CSS-IDs und Klassennamen bevorzugen, ist die Funktionalität.

Wenn Sie Tastaturkürzel wie option+ left/ right(oder ctrl+ left/ rightunter Windows) verwenden, um Code Wort für Wort zu durchlaufen, wird der Cursor an jedem Bindestrich angehalten, sodass Sie die ID oder den Klassennamen mithilfe von Tastaturkürzeln präzise durchlaufen können. Unterstriche und camelCase werden nicht erkannt und der Cursor bewegt sich direkt über ihnen, als wäre alles ein einziges Wort.

Ich habe erst kürzlich angefangen, XML zu lernen. Die Unterstrichversion hilft mir, alles XML-bezogene (DOM, XSD usw.) von Programmiersprachen wie Java, JavaScript (Kamelfall) zu trennen. Und ich stimme Ihnen zu, dass die Verwendung von Bezeichnern, die in Programmiersprachen zulässig sind, besser aussieht.

Bearbeiten: Könnte nicht in Beziehung stehen, aber hier ist ein Link für Regeln und Empfehlungen zum Benennen von XML-Elementen, denen ich beim Benennen von IDs folge (Abschnitte "XML-Benennungsregeln" und "Best Naming Practices").

http://www.w3schools.com/xml/xml_elements.asp

Ich denke, es ist plattformabhängig. Bei der Entwicklung in .Net MVC verwende ich Kleinbuchstaben und Bindestriche im Bootstrap-Stil für Klassennamen, aber für IDs verwende ich PascalCase.

Der Grund dafür ist, dass meine Ansichten von stark typisierten Ansichtsmodellen unterstützt werden. Die Eigenschaften von C # -Modellen sind Pascal-Fälle. Für die Modellbindung mit MVC ist es sinnvoll, dass die Namen der HTML-Elemente, die an das Modell gebunden sind, mit den Eigenschaften des Ansichtsmodells übereinstimmen, bei denen es sich um Groß- und Kleinschreibung handelt. Der Einfachheit halber verwenden meine IDs dieselbe Namenskonvention wie Elementnamen, mit Ausnahme von Optionsfeldern und Kontrollkästchen, für die für jedes Element in der benannten Eingabegruppe eindeutige IDs erforderlich sind.