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

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.

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) .

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.

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.

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 .

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.

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).