Mit Cascading Style Sheets (CSS) können Sie das Erscheinungsbild eines Elements definieren, indem Sie es in die Attribute einhaken, die Sie auf dieses Element anwenden. Diese Attribute können entweder eine ID oder eine Klasse sein. Wie alle Attribute fügen sie den Elementen, mit denen sie verbunden sind, hilfreiche Informationen hinzu.
Abhängig davon, welches Attribut Sie einem Element hinzufügen, können Sie einen CSS-Selektor schreiben, um die erforderlichen visuellen Stile anzuwenden, die erforderlich sind, um das Erscheinungsbild dieses Elements und der gesamten Website zu erreichen.
Während entweder IDs oder Klassen dazu dienen, sich mit CSS-Regeln zu verbinden, bevorzugen moderne Webdesign-Methoden Klassen gegenüber IDs, zum Teil, weil sie weniger spezifisch sind und insgesamt einfacher zu handhaben sind. Ja, es gibt immer noch viele Websites, die IDs verwenden, aber diese Attribute werden sparsamer als in der Vergangenheit angewendet, während der Unterricht moderne Webseiten übernommen hat.
Einzelne oder mehrere Klassen in CSS?
In den meisten Fällen würden Sie einem Element ein einzelnes Klassenattribut zuweisen, aber Sie sind tatsächlich nicht auf eine Klasse beschränkt, wie Sie sie mit IDs haben. Während ein Element nur ein einzelnes ID-Attribut haben kann, können Sie einem Element durchaus mehrere Klassen zuweisen. In manchen Fällen wird dadurch die Gestaltung Ihrer Seite einfacher und die Flexibilität wesentlich erhöht!
Wenn Sie einem Element mehrere Klassen zuweisen müssen, können Sie die zusätzlichen Klassen hinzufügen und sie durch ein Leerzeichen in Ihrem Attribut trennen.
Dieser Absatz hat beispielsweise drei Klassen:
Dies wäre der Text des Absatzes
Dadurch werden die folgenden drei Klassen für das Absatz-Tag festgelegt:
- Pullquote
- Vorgestellt
- Links
Beachten Sie die Leerzeichen zwischen diesen Klassenwerten. Diese Räume sind es, was sie als unterschiedliche, individuelle Klassen aufstellt. Dies ist auch der Grund, warum Klassennamen keine Leerzeichen enthalten dürfen, da dies zu separaten Klassen führen würde. Wenn Sie zum Beispiel "pullquote-features-left" ohne Leerzeichen verwendet haben, wäre dies ein Klassenwert. Im obigen Beispiel, bei dem diese drei Wörter durch ein Leerzeichen getrennt sind, werden sie als Einzelwerte festgelegt. Es ist wichtig, dieses Konzept zu verstehen, wenn Sie entscheiden, welche Klassenwerte auf Ihren Webseiten verwendet werden sollen.
Sobald Sie Ihre Klassenwerte in HTML haben, können Sie diese als Klassen in Ihrem CSS zuweisen und die Stile anwenden, die Sie hinzufügen möchten. Zum Beispiel.
.pullquote {…}.featured {…}p.left {…}
In diesen Beispielen befinden sich die CSS-Deklarationen und Wertepaare innerhalb der geschweiften Klammern. Auf diese Weise werden diese Stile auf den entsprechenden Selektor angewendet.
Wenn Sie eine Klasse auf ein bestimmtes Element festlegen (z. B.p.lft), können Sie es trotzdem als Teil einer Klassenliste verwenden; Beachten Sie jedoch, dass dies nur die Elemente betrifft, die im CSS angegeben sind. Mit anderen Worten, die p.lft style gilt nur für Absätze mit dieser Klasse, da der Selektor tatsächlich sagt, dass er auf "Absätze mit dem Klassenwert" left "angewendet wird. Im Gegensatz dazu geben die anderen beiden Selektoren im Beispiel kein bestimmtes Element an, sie würden also auf jedes Element angewendet, das diese Klassenwerte verwendet.
Vorteile mehrerer Klassen
Mehrere Klassen können das Hinzufügen von Spezialeffekten zu Elementen erleichtern, ohne dass ein ganz neuer Stil für dieses Element erstellt werden muss.
Beispielsweise möchten Sie möglicherweise die Möglichkeit haben, Elemente schnell nach links oder rechts zu verschieben. Sie könnten zwei Klassen schreiben
links und
Recht nur mit
Schwimmer: links; und
schweben rechts; in ihnen. Immer dann, wenn Sie ein Element nach links gleiten mussten, fügen Sie einfach die Klasse "left" zur Klassenliste hinzu.
Hier gibt es jedoch eine schöne Linie. Denken Sie daran, dass Webstandards die Trennung von Stil und Struktur vorgeben. Die Struktur wird über HTML abgewickelt, während der Stil in CSS vorliegt. Wenn Ihr HTML-Dokument mit Elementen gefüllt ist, die alle Klassennamen wie "rot" oder "links" haben. Dies sind Namen, die bestimmen, wie Elemente aussehen sollen und nicht wie sie aussehen sollen. Sie überschreiten diese Linie zwischen Struktur und Stil. Ich versuche aus diesem Grund meine nicht-semantischen Klassennamen so weit wie möglich zu begrenzen.
Mehrere Klassen, Semantik und JavaScript
Ein weiterer Vorteil der Verwendung mehrerer Klassen besteht darin, dass Sie viele weitere Interaktivitätsmöglichkeiten bieten.
Sie können mithilfe von JavaScript neue Klassen auf vorhandene Elemente anwenden, ohne die ursprünglichen Klassen zu entfernen. Sie können Klassen auch verwenden, um die Semantik eines Elements zu definieren. Das heißt, Sie können zusätzliche Klassen hinzufügen, um zu definieren, was dieses Element semantisch bedeutet. So funktioniert Microformats.
Nachteile mehrerer Klassen
Der größte Nachteil bei der Verwendung mehrerer Klassen für Ihre Elemente besteht darin, dass sie im Laufe der Zeit etwas unhandlich werden können. Es kann schwierig werden, zu bestimmen, welche Stile sich auf ein Element auswirken und ob Skripts dies beeinflussen. Viele der heute verfügbaren Frameworks, wie Bootstrap, verwenden Elemente mit mehreren Klassen. Dieser Code kann sehr schnell aus dem Ruder laufen und schwer zu bearbeiten sein, wenn Sie nicht aufpassen.
Wenn Sie mehrere Klassen verwenden, besteht auch das Risiko, dass der Stil einer Klasse den Stil einer anderen Klasse überschreibt, selbst wenn Sie dies nicht beabsichtigen. Dies kann es dann schwierig machen, herauszufinden, warum Ihre Stile nicht angewendet werden, auch wenn es den Anschein hat, dass sie funktionieren sollten. Sie müssen sich der Besonderheit bewusst sein, auch wenn die Attribute auf dieses eine Element angewendet werden!
Wenn Sie ein Tool wie die Webmaster-Tools in Google Chrome verwenden, können Sie leichter erkennen, wie sich Ihre Klassen auf Ihre Stile auswirken, und dieses Problem von in Konflikt stehenden Stilen und Attributen vermeiden.
