Warum werden Bindestriche für CSS-Selektoren / HTML-Attribute bevorzugt?

213

In der Vergangenheit habe ich immer Unterstriche zum Definieren von Klassen- und ID- Attributen in HTML verwendet. In den letzten Jahren habe ich auf Bindestriche umgestellt, hauptsächlich, um mich dem Trend in der Community anzupassen , nicht unbedingt, weil es für mich Sinn machte.

Ich habe immer gedacht, dass Bindestriche mehr Nachteile haben, und ich sehe die Vorteile nicht:

Code-Vervollständigung und Bearbeitung

Die meisten Editoren behandeln Bindestriche als Worttrennzeichen, sodass ich nicht zum gewünschten Symbol wechseln kann. Angenommen, die Klasse ist " featured-product", ich muss " " automatisch vervollständigen featured, einen Bindestrich eingeben und " product" vervollständigen .

Mit Unterstrichen wird " featured_product" als ein Wort behandelt, sodass es in einem Schritt ausgefüllt werden kann.

Gleiches gilt für die Navigation durch das Dokument. Das Springen nach Wörtern oder das Doppelklicken auf Klassennamen wird durch Bindestriche unterbrochen.

(Im Allgemeinen stelle ich mir Klassen und IDs als Token vor , daher macht es für mich keinen Sinn, dass ein Token so einfach in Bindestriche aufgeteilt werden kann.)

Mehrdeutigkeit mit arithmetischem Operator

Durch die Verwendung von Bindestrichen wird der Zugriff auf Objekteigenschaften auf Formularelemente in JavaScript unterbrochen. Dies ist nur mit Unterstrichen möglich:

form.first_name.value='Stormageddon';

(Zugegeben, ich greife selbst nicht auf diese Weise auf Formularelemente zu, aber wenn Sie sich als universelle Regel für Bindestriche oder Unterstriche entscheiden, denken Sie daran, dass dies jemand tun könnte.)

Sprachen wie Sass (insbesondere im gesamten Compass- Framework) haben sich standardmäßig für Bindestriche entschieden, auch für Variablennamen. Sie verwendeten ursprünglich auch am Anfang Unterstriche. Die Tatsache, dass dies anders analysiert wird, kommt mir seltsam vor:

$list-item-10
$list-item - 10

Inkonsistenz mit der Benennung von Variablen in verschiedenen Sprachen

Früher habe ich underscored_namesfür Variablen in PHP, Ruby, HTML / CSS und JavaScript geschrieben. Dies war praktisch und konsistent, aber um wieder "hinein zu passen", benutze ich jetzt:

  • dash-case in HTML / CSS
  • camelCase in JavaScript
  • underscore_case in PHP und Ruby

Das stört mich nicht wirklich, aber ich frage mich, warum diese scheinbar absichtlich so falsch ausgerichtet wurden. Zumindest mit Unterstrichen war es möglich, die Konsistenz aufrechtzuerhalten:

var featured_product = $('#featured_product'); // instead of
var featuredProduct = $('#featured-product');

Die Unterschiede führen zu Situationen, in denen wir Zeichenfolgen unnötig übersetzen müssen , zusammen mit der Möglichkeit von Fehlern.

Also frage ich: Warum hat sich die Community fast überall auf Bindestriche festgelegt, und gibt es Gründe, die die Unterstriche überwiegen?

Es gibt eine verwandte Frage aus der Zeit, als dies begann, aber ich bin der Meinung, dass es nicht nur Geschmackssache ist (oder hätte sein sollen). Ich würde gerne verstehen, warum wir uns alle für diese Konvention entschieden haben, wenn es wirklich nur Geschmackssache war.

Andrew Vit
quelle
50
Ich benutze Bindestriche, weil ich die Umschalttaste nicht drücken muss.
Jrod
12
Neugierig, warum dies geschlossen wurde ... gab es Stimmen, um es zu schließen? Ich bitte nicht um Meinungen zu dieser Frage. Ich habe konkrete Gründe gegen die Verwendung von Bindestrichen angegeben, aber es muss gute Gründe dafür geben, wenn sich alle anscheinend auf diesen Trend einigen. Hier gibt es einige gute Antworten und gute Informationen. Kann ich die Frage verbessern?
Andrew Vit
9
Ich nominiere meine Frage für die Wiedereröffnung: Alle Antworten unten enthalten "Fakten, Referenzen oder spezifisches Fachwissen" ... daher sehe ich nicht, wie es "nicht konstruktiv" war.
Andrew Vit
12
Ich denke, diesen Thread als nicht konstruktiv zu schließen, war eine dumme Entscheidung. Wenn es einen Codierungsstil gibt, der aufgrund einer anderen als der Präferenz bevorzugt wird (für IDEs einfacher zu handhaben, einfachere Code-Vervollständigung, bessere Integration in Tools), wäre dies meiner Meinung nach eine recht konstruktive Frage / Antwort / Diskussion.
Jake Wilson
8
@ AndrewVit: Dies ist eine sehr gute Frage, gut formatiert, informativ und hebt mehrere Aspekte hervor. +1 dafür. Übrigens stimme ich zu, dass es sinnlos war, dieses Thema als "nicht konstruktiv" zu schließen . Eigentlich ist es konstruktiv.
Sk8erPeter

Antworten:

130

Code-Vervollständigung

Ob Bindestrich als Interpunktion oder als undurchsichtige Kennung interpretiert wird, hängt wohl vom Editor der Wahl ab. Als persönliche Präferenz bevorzuge ich es jedoch, zwischen den einzelnen Wörtern in einer CSS-Datei wechseln zu können, und würde es ärgerlich finden, wenn sie mit einem Unterstrich getrennt würden und es keine Stopps gäbe.

Durch die Verwendung von Bindestrichen können Sie auch die Vorteile von nutzen Attributauswahl | = nutzen , mit der jedes Element ausgewählt wird, das den Text enthält, optional gefolgt von einem Bindestrich:

span[class|="em"] { font-style: italic; }

Dies würde dazu führen, dass die folgenden HTML-Elemente kursiv geschrieben sind:

<span class="em">I'm italic</span>
<span class="em-strong">I'm italic too</span>

Mehrdeutigkeit mit arithmetischem Operator

Ich würde sagen, dass der Zugriff auf HTML-Elemente über die Punktnotation in JavaScript eher ein Fehler als eine Funktion ist. Es ist ein schreckliches Konstrukt aus den Anfängen schrecklicher JavaScript-Implementierungen und keine wirklich gute Praxis. Für die meisten Dinge, die Sie heutzutage mit JavaScript tun, möchten Sie ohnehin CSS-Selektoren zum Abrufen von Elementen aus dem DOM verwenden, was die gesamte Punktnotation ziemlich nutzlos macht. Welches würdest du bevorzugen?

var firstName = $('#first-name');
var firstName = document.querySelector('#first-name');
var firstName = document.forms[0].first_name;

Ich finde die beiden ersten Optionen viel vorzuziehen, zumal '#first-name'sie durch eine JavaScript-Variable ersetzt und dynamisch erstellt werden können. Ich finde sie auch angenehmer für die Augen.

Die Tatsache, dass Sass Arithmetik in seinen Erweiterungen zu CSS aktiviert, trifft nicht wirklich auf CSS selbst zu, aber ich verstehe (und begrüße) die Tatsache, dass Sass dem Sprachstil von CSS folgt (mit Ausnahme des $Präfixes von Variablen, das natürlich sollte gewesen @). Wenn Sass-Dokumente wie CSS-Dokumente aussehen und sich anfühlen sollen, müssen sie denselben Stil wie CSS verwenden, bei dem Bindestrich als Trennzeichen verwendet wird. In CSS3 ist die Arithmetik auf die calcFunktion beschränkt, was zeigt, dass dies in CSS selbst kein Problem ist.

Inkonsistenz mit der Benennung von Variablen in verschiedenen Sprachen

Alle Sprachen, Markup-Sprachen, Programmiersprachen, Styling-Sprachen oder Skriptsprachen, haben ihren eigenen Stil. Sie finden dies in Untersprachen von Sprachgruppen wie XML, in denen z. B. XSLT Kleinbuchstaben mit Bindestrichbegrenzern verwendet und XML Schema Kamel-Casing verwendet.

Im Allgemeinen werden Sie feststellen, dass es besser ist, den Stil zu übernehmen, der sich in der Sprache, in der Sie schreiben, am "einheimischsten" anfühlt und aussieht, als zu versuchen, Ihren eigenen Stil in jede andere Sprache zu integrieren. Da Sie nicht vermeiden können, native Bibliotheken und Sprachkonstrukte verwenden zu müssen, wird Ihr Stil durch den nativen Stil "verschmutzt", ob Sie ihn mögen oder nicht. Es ist also ziemlich sinnlos, es überhaupt zu versuchen.

Mein Rat ist, keinen sprachübergreifenden Lieblingsstil zu finden, sondern sich in jeder Sprache zu Hause zu fühlen und zu lernen, all ihre Macken zu lieben. Eine der Besonderheiten von CSS ist, dass Schlüsselwörter und Bezeichner in Kleinbuchstaben geschrieben und durch Bindestriche getrennt sind. Persönlich finde ich das sehr ansprechend und denke, es passt zum HTML -Code in Kleinbuchstaben (obwohl ohne Bindestrich) .

Asbjørn Ulsberg
quelle
4
"Ob Bindestrich als Interpunktion oder als undurchsichtige Kennung interpretiert wird, hängt vom ausgewählten Editor ab." Ich glaube nicht, dass dies im Allgemeinen zutrifft, obwohl es möglicherweise einige außergewöhnliche Editoren gibt. Durch Doppelklicken auf ein Wort mit Bindestrich wird nur ein Teil davon ausgewählt, nicht das gesamte Token. Dies scheint betriebssystemweit zu sein.
Andrew Vit
13
Guter Punkt über den |=Selektor, das habe ich in der anderen Antwort gesehen, und es ist ein fairer Punkt. Wurde die Sprachkonvention darauf ausgelegt oder umgekehrt? (Bindestriche als universeller Trend scheinen relativ neu zu sein, diese könnten ungefähr zur gleichen Zeit entstanden sein.)
Andrew Vit
1
@AndrewVit, es gibt CLI-basierte Editoren, bei denen ein Doppelklick nicht relevant ist (da normalerweise keine Maus vorhanden ist) und die so konfiguriert werden können, dass sie sich so verhalten. Aber im Allgemeinen hast du recht. Der |=Attributselektor wurde speziell für dielang Attribut erstellt, seine Verwendung kann jedoch erweitert werden. Ich habe in meinem CSS immer Bindestriche verwendet, daher kann ich nicht für die breite Öffentlichkeit sprechen, aber es gab definitiv eine Konvergenz zu Hyphen von Pascal-Fall, Kamel-Fall und Unterstrichen. Der |=Selektor und der Bindestrich als Trennzeichen sind jedoch, soweit ich das beurteilen kann, nicht miteinander verbunden.
Asbjørn Ulsberg
3
Ich sehe die Punktnotation nicht als Fehler, es ist CSS, das keine Bindestriche hätte verwenden sollen. Auch was für die Augen angenehm ist, ist variabel.
Vivek
2
@ KamilKiełczewski Das ist nützlich, funktioniert aber etwas anders.
gcampbell
68

Möglicherweise ist ein Hauptgrund, warum sich die HTML / CSS-Community mit Bindestrichen anstelle von Unterstrichen ausgerichtet hat, auf historische Mängel bei Spezifikationen und Browserimplementierungen zurückzuführen.

Aus einem Mozilla-Dokument, das im März 2001 veröffentlicht wurde @ https://developer.mozilla.org/en-US/docs/Underscores_in_class_and_ID_Names veröffentlicht wurde

Die 1996 in ihrer endgültigen Form veröffentlichte CSS1-Spezifikation erlaubte die Verwendung von Unterstrichen in Klassen- und ID-Namen nur, wenn sie "maskiert" wurden. Ein entkommener Unterstrich würde ungefähr so ​​aussehen:

    p.urgent\_note {color: maroon;}

Dies wurde von den Browsern zu diesem Zeitpunkt jedoch nicht gut unterstützt, und die Praxis hat sich nie durchgesetzt. CSS2, veröffentlicht 1998, verbot auch die Verwendung von Unterstrichen in Klassen- und ID-Namen. Errata gemäß der Anfang 2001 veröffentlichten Spezifikation unterstrichen jedoch erstmals die Legalität. Dies komplizierte leider eine bereits komplexe Landschaft.

Ich mag im Allgemeinen Unterstriche, aber der Backslash macht es hoffnungslos hässlich, ganz zu schweigen von der knappen Unterstützung zu dieser Zeit. Ich kann verstehen, warum Entwickler es wie die Pest vermieden haben. Natürlich brauchen wir heutzutage keinen Backslash, aber die Dash-Etikette ist bereits fest etabliert.

user193130
quelle
6
Vielen Dank! Ich liebe es, die "Etymologie" einer solchen Konvention herauszufinden. Es hilft mir, mich daran zu erinnern, die Konvention zu verwenden, da ich die Sprache damit verknüpfen kann. Die Assoziation hilft mir dabei, mein Unterbewusstsein darauf vorzubereiten, die Konvention als Ergebnis zu verwenden.
Ape-inago
39

Ich glaube nicht, dass irgendjemand dies definitiv beantworten kann, aber hier sind meine fundierten Vermutungen:

  1. Unterstriche erfordern das Drücken der Umschalttaste und sind daher schwieriger zu tippen.

  2. CSS-Selektoren, die Teil der offiziellen CSS-Spezifikationen sind, verwenden Bindestriche (z. B. Pseudoklassen wie: erstes Kind und Pseudoelemente: erste Zeile) und keine Unterstriche. Gleiches gilt für Eigenschaften, z. B. Textdekoration, Hintergrundfarbe usw. Programmierer sind Gewohnheitstiere. Es ist sinnvoll, dass sie dem Standardstil folgen, wenn es keinen guten Grund gibt, dies nicht zu tun.

  3. Dieser ist weiter draußen auf dem Sims, aber ... Ob Mythos oder Tatsache, es gibt eine langjährige Idee, dass Google Wörter, die durch Unterstriche getrennt sind, als ein einzelnes Wort und Wörter, die durch Striche getrennt sind, als separate Wörter behandelt. (Matt schneidet Unterstriche gegen Bindestriche ab.) Aus diesem Grund weiß ich, dass ich jetzt beim Erstellen von Seiten-URLs lieber Wörter mit Bindestrichen verwende, und zumindest für mich hat dies meine Namenskonventionen für andere Dinge beeinflusst , wie CSS-Selektoren.

Mason G. Zhwiti
quelle
2
Guter Punkt zur Suchmaschinenoptimierung in Bezug auf Bindestriche in URLs und für semantisches Markup (ob dies tatsächlich zutrifft oder nicht) ... Können Sie klarstellen, welche "CSS-Selektoren, die Teil der offiziellen CSS-Spezifikationen sind, Bindestriche verwenden"?
Andrew Vit
Ich habe Punkt 2 in meiner Antwort erweitert, um einige Beispiele zu nennen, obwohl ich mehr über CSS-Eigenschaften wie Textdekoration als über "Selektoren" nachdachte, so dass dies ein Tippfehler war, obwohl es einige Selektoren gibt, die dies tun oben angemerkt.
Mason G. Zhwiti
1
Danke @albert, das wäre eine gute Antwort für sich ... zumindest für den historischen Kontext. Ich wusste nicht, dass die ursprüngliche Spezifikation keine Unterstriche zulässt! (Aber es macht keinen Sinn, warum sie nicht zugelassen werden sollten.)
Andrew Vit
4
Punkt 2 hat mich überzeugt, insbesondere angesichts der Eigenschaften wie Hintergrundfarbe, Textdekoration usw.
Textdekoration
2
Zu Ihrer Information für Neugierige: Die URL von devedge-temp, auf die in @ alberts Kommentar oben verwiesen wird ( devedge-temp.mozilla.org/viewsource/2001/css-underscores ), befindet sich jetzt unter developer.mozilla.org/en-US/docs/…
Aponzani
14

Es gibt viele Gründe, aber einer der wichtigsten ist die Aufrechterhaltung der Konsistenz .

Ich denke, dieser Artikel erklärt es umfassend.

CSS ist eine durch Bindestriche getrennte Syntax. Damit meine ich , wir schreiben Dinge wie font-size, line-height, border-bottomusw.

So:

Sie sollten Syntax einfach nicht mischen: Es ist inkonsistent .

simhumileco
quelle
11

In den letzten Jahren gab es einen deutlichen Anstieg bei durch Bindestriche getrennten Ganzwortsegmenten von URLs. Dies wird durch SEO Best Practices gefördert. Google "empfiehlt ausdrücklich, in Ihren URLs Bindestriche (-) anstelle von Unterstrichen (_) zu verwenden": http://www.google.com/support/webmasters/bin/answer.py?answer=76329 .

Wie bereits erwähnt, haben sich zu unterschiedlichen Zeiten in unterschiedlichen Kontexten unterschiedliche Konventionen durchgesetzt, sie sind jedoch in der Regel kein formaler Bestandteil eines Protokolls oder Frameworks.

Meine Hypothese lautet daher, dass die Position von Google dieses Muster in einem Schlüsselkontext (SEO) verankert. Der Trend, dieses Muster in Klassen-, ID- und Attributnamen zu verwenden, ist einfach, dass sich die Herde langsam in diese allgemeine Richtung bewegt.

Faust
quelle
5

Ich denke, es ist eine programmiererabhängige Sache. Einige verwenden gerne Bindestriche, andere Unterstriche.
Ich persönlich verwende Unterstriche ( _), weil ich sie auch an anderen Stellen verwende. Wie zum Beispiel:
- JavaScript-Variablen ( var my_name);
- Meine Controller-Aktionen ( public function view_detail)
Ein weiterer Grund, warum ich Unterstriche verwende, ist, dass in den meisten IDEs zwei durch Unterstriche getrennte Wörter als 1 Wort betrachtet werden. (und können mit double_click ausgewählt werden).

Ali Farhoudi
quelle