Der Unterschied zwischen ID und Klasse

IDs und Klassen sind „Haken“!

Wir brauchen Möglichkeiten, Inhalte in einem HTML/XHTML-Dokument zu beschreiben. Die grundlegenden Elemente wie <h1>, <p> und <ul> erledigen oft die Aufgabe, aber unsere grundlegende Tag-Sammlung deckt nicht jeden möglichen Typ von Seitenelement oder Layout-Auswahl ab. Dafür benötigen wir IDs und Klassen. Zum Beispiel <ul id="nav">, dies gibt uns die Möglichkeit, diese ungeordnete Liste gezielt anzusprechen, sodass wir sie einzigartig für andere ungeordnete Listen auf unserer Seite manipulieren können. Oder wir haben einen Abschnitt auf unserer Seite, der keinen relevanten Tag zur Kennzeichnung hat, z. B. eine Fußzeile, wo wir etwas wie folgt tun könnten: <div id="footer">. Oder vielleicht haben wir in unserer Seitenleiste Boxen, um Inhalte dort auf irgendeine Weise getrennt zu halten: <div class="sidebar-box">.

Diese IDs und Klassen sind die „Haken“, die wir in das Markup einbauen müssen, um an sie heranzukommen. CSS benötigt diese offensichtlich, damit wir Selektoren erstellen und unsere Stile gestalten können, aber auch andere Websprachen wie JavaScript hängen von ihnen ab. Aber was ist der Unterschied zwischen ihnen?

IDs sind einzigartig

• Jedes Element kann nur eine ID haben
• Jede Seite kann nur ein Element mit dieser ID haben

Als ich anfing, mich damit zu beschäftigen, hörte ich immer wieder, dass man IDs nur einmal verwenden sollte, aber Klassen immer wieder verwenden kann. Es ging mir praktisch durch ein Ohr hinein und durch das andere, weil es mir mehr wie eine gute „Faustregel“ vorkam als etwas extrem Wichtiges. Wenn man sich rein auf HTML/CSS konzentriert, kann diese Einstellung bestehen bleiben, weil sie einem dann wirklich keinen Unterschied machen.

Hier ist einer: Ihr Code wird die Validierung nicht bestehen, wenn Sie dieselbe ID für mehr als ein Element verwenden. Validierung sollte uns allen wichtig sein, das allein ist schon ein großer Punkt. Wir werden im weiteren Verlauf noch mehr Gründe für Einzigartigkeit besprechen.

Klassen sind nicht eindeutig

• Sie können dieselbe Klasse auf mehreren Elementen verwenden.
• Sie können mehrere Klassen auf demselben Element verwenden.

Jegliche Styling-Informationen, die auf mehrere Objekte auf einer Seite angewendet werden müssen, sollten mit einer Klasse erfolgen. Nehmen Sie zum Beispiel eine Seite mit mehreren „Widgets“

<div class="widget"></div>
<div class="widget"></div>
<div class="widget"></div>

Sie können nun den Klassennamen „widget“ als Ihren Haken verwenden, um jedem dieser Widgets denselben Satz von Stilen zuzuweisen. Aber was, wenn Sie möchten, dass eines davon größer ist als das andere, aber dennoch alle anderen Attribute gemeinsam hat? Klassen decken Sie dort ab, da Sie mehr als eine Klasse zuweisen können

<div class="widget"></div>
<div class="widget big"></div>
<div class="widget"></div>

Hier ist kein neuer Klassenname erforderlich, weisen Sie einfach eine neue Klasse im Klassenattribut zu. Diese Klassen sind durch Leerzeichen getrennt und die meisten Browser unterstützen beliebig viele davon (tatsächlich eher Tausende, aber weit mehr, als Sie jemals brauchen werden).

Es gibt keine Browser-Standardeinstellungen für ID oder Klasse

Das Hinzufügen eines Klassennamens oder einer ID zu einem Element hat standardmäßig keine Auswirkung auf dieses Element.

Das ist etwas, das mich als Anfänger gestolpert hat. Sie arbeiten an einer Website und stellen fest, dass die Anwendung eines bestimmten Klassennamens ein Problem löst, das Sie haben. Dann springen Sie zu einer anderen Website mit demselben Problem und versuchen, es mit demselben Klassennamen zu lösen, in der Annahme, dass der Klassenname selbst eine magische Eigenschaft hat, nur um festzustellen, dass es nicht funktioniert hat.

Klassen und IDs haben für sich genommen keine Styling-Informationen. Sie erfordern CSS, um sie anzusprechen und Stile anzuwenden.

Barcodes und Seriennummern

Eine gute Analogie hierfür sind vielleicht Barcodes und Seriennummern. Nehmen Sie einen iPod in einem Geschäft. Auf der Verpackung befindet sich ein Barcode. Dies sagt dem Geschäft, was das Produkt ist, sodass das System, wenn es gescannt wird, genau weiß, was das Produkt ist und was es kostet. Es könnte sogar wissen, welche Farbe es hat oder wo es im Geschäft aufbewahrt wurde. Alle iPods desselben Typs haben den exakt gleichen Barcode.

Der iPod wird auch eine Seriennummer haben, die absolut einzigartig für jeden anderen iPod (oder jedes andere Gerät) auf der Welt ist. Die Seriennummer kennt nicht den Preis. Das könnte sie, aber für das Geschäft wäre das keine sehr effiziente Art, diese Daten zu speichern und zu verwenden. Viel einfacher ist es, den Barcode zu verwenden, sodass Sie beispielsweise, wenn sich der Preis ändert, einfach den Preis für diesen Barcode ändern können und nicht jede einzelne Seriennummer in Ihrem System.

Dies ist ähnlich wie bei IDs und Klassen. Informationen, die wiederverwendbar sind, sollten in einer Klasse gespeichert werden, und Informationen, die absolut einzigartig sind, sollten in einer ID gespeichert werden.

IDs haben spezielle Browser-Funktionalität

Klassen haben keine speziellen Fähigkeiten im Browser, aber IDs haben einen sehr wichtigen Trick auf Lager. Das ist der „Hash-Wert“ in der URL. Wenn Sie eine URL wie http://yourdomain.com#comments haben, versucht der Browser, das Element mit der ID „comments“ zu finden und scrollt die Seite automatisch, um dieses Element anzuzeigen. Es ist wichtig zu beachten, dass der Browser jedes Element scrollt, das er benötigt, um dieses Element anzuzeigen. Wenn Sie also etwas Besonderes getan haben, wie z. B. einen scrollbaren DIV-Bereich innerhalb Ihres regulären Bodys, wird auch dieser DIV gescrollt.

Das ist ein wichtiger Grund dafür, warum es wichtig ist, dass IDs absolut eindeutig sind. Damit Ihr Browser weiß, wohin er scrollen soll!

Elemente können BEIDES haben

Nichts hindert Sie daran, sowohl eine ID als auch eine Klasse auf einem einzelnen Element zu haben. Tatsächlich ist es oft eine sehr gute Idee. Nehmen Sie zum Beispiel das Standard-Markup für ein WordPress-Kommentarlistenelement

<li id="comment-27299" class="item">

Es hat eine Klasse, die Sie vielleicht für das Styling aller Kommentare auf der Seite verwenden möchten, aber es hat auch einen eindeutigen ID-Wert (dynamisch von WordPress generiert, glücklicherweise). Dieser ID-Wert ist für direkte Links nützlich. Jetzt kann ich einfach direkt zu einem bestimmten Kommentar auf einer bestimmten Seite verlinken.

CSS ist es egal

In Bezug auf CSS gibt es nichts, was man mit einer ID tun kann, was man nicht mit einer Klasse tun kann und umgekehrt. Ich erinnere mich, als ich gerade CSS lernte und ein Problem hatte, versuchte ich manchmal, durch das Austauschen dieser Werte zu troubleshooten. Nein. CSS ist es egal.

JavaScript ist es wichtig

JavaScript-Entwickler sind wahrscheinlich schon besser mit den Unterschieden zwischen Klassen und IDs vertraut. JavaScript ist darauf angewiesen, dass es auf einer Seite nur ein Element mit einer bestimmten id gibt, sonst wäre die häufig verwendete Funktion getElementById nicht zuverlässig. Wer mit jQuery vertraut ist, weiß, wie einfach es ist, Seiten-Elementen Klassen hinzuzufügen und zu entfernen. Es ist eine native und integrierte Funktion von jQuery. Beachten Sie, dass es keine solche Funktion für IDs gibt. Es liegt nicht in der Verantwortung von JavaScript, diese Werte zu manipulieren, es würde mehr Probleme verursachen, als es wert wäre.

Wenn Sie sie nicht brauchen, verwenden Sie sie nicht

Wie Sie sehen können, sind Klassen und IDs sehr wichtig und wir verlassen uns täglich darauf, um die gewünschte Formatierung und Seitenmanipulation durchzuführen. Sie sollten sie jedoch sparsam und semantisch einsetzen.

Das bedeutet, Dinge wie diese zu vermeiden

<a href="https://css-tricks.de" class="link">CSS-Tricks.com</a>

Wir wissen bereits, dass dieses Element ein Link ist, es ist ein Anker-Element! Kein besonderer Bedarf, hier eine Klasse anzuwenden, da wir bereits Stile über seinen Tag anwenden können.

Vermeiden Sie auch dies

<div id="right-col">

Die ID wird hier passend verwendet, da die Seite wahrscheinlich nur eine einzige rechte Spalte haben wird, aber der Name ist unpassend. Versuchen Sie, den Kontext des Elements zu beschreiben, nicht wo es sich befindet oder wie es aussieht. Eine ID hier von „sidebar“ wäre angemessener.

Mikroformate sind nur spezifische Klassennamen

Denken Sie, dass Mikroformate über Ihren Kopf gehen? Das tun sie nicht! Sie sind nur normale Markups, die standardisierte Klassennamen für die darin enthaltenen Informationen verwenden. Schauen Sie sich eine Standard-vCard an

<div class="vcard">
  <a class="fn org url" href="http://www.commerce.net/">CommerceNet</a>
  <div class="adr">
    <span class="type">Work</span>:
    <div class="street-address">169 University Avenue</div>
    <span class="locality">Palo Alto</span>,  
    <abbr class="region" title="California">CA</abbr>  
    <span class="postal-code">94301</span>
    <div class="country-name">USA</div>
  </div>
  <div class="tel">
   <span class="type">Work</span> +1-650-289-4040
  </div>
  <div class="tel">
    <span class="type">Fax</span> +1-650-289-4041
  </div>
  <div>Email: 
   <span class="email">[email protected]</span>
  </div>
</div>