Die Komma-Rolle in der CSS-Selektor-Syntax

CSS, oder Cascading Style Sheets, sind die in der Webdesign-Branche akzeptierte Methode, um einer Website visuelle Stile hinzuzufügen. Mit CSS können Sie Seitenlayout, Farben, Typografie, Hintergrundbild und vieles mehr. Grundsätzlich ist CSS der Weg, um diese Stile auf Ihre Website zu bringen, wenn es sich um einen visuellen Stil handelt.

Wenn Sie einem Dokument CSS-Stile hinzufügen, stellen Sie möglicherweise fest, dass das Dokument immer länger wird. Selbst eine kleine Site mit nur einer Handvoll Seiten kann mit einer ansehnlichen CSS-Datei enden – und eine sehr große Site mit vielen, vielen Seiten mit einzigartigem Inhalt kann sehr große CSS-Dateien haben. Dies wird noch verstärkt durch Responsive Websites die haben viele Medien-Anfragen in den Stylesheets enthalten, um das Aussehen der Grafiken und das Seitenlayout für verschiedene Bildschirme zu ändern.

Ja, CSS-Dateien können lang werden. Dies ist kein großes Problem, wenn es um geht Website-Performance und Download-Geschwindigkeit

watch instagram stories
, denn selbst eine lange CSS-Datei ist wahrscheinlich ziemlich klein (da es sich eigentlich nur um ein Textdokument handelt). Dennoch zählt jedes bisschen, wenn es um die Seitengeschwindigkeit geht. Wenn Sie also Ihr Stylesheet schlanker gestalten können, ist dies eine gute Idee. Hier kann das "Komma" in Ihrem Stylesheet sehr praktisch sein!

Kommas und CSS

Webgrafik, die den Unterschied zwischen Front-End- und Back-End-Ansichten veranschaulicht
filo / Getty Images

Sie haben sich vielleicht schon gefragt, welche Rolle das Komma in der CSS-Selektorsyntax spielt. Wie in Sätzen bringt das Komma Klarheit – nicht Code – in die Trennzeichen. Das Komma in a CSS-Selektor trennt mehrere Selektoren innerhalb der gleichen Stile.

Sehen wir uns zum Beispiel unten etwas CSS an.

th { Farbe: rot; }
td { Farbe: rot; }
p.red { Farbe: rot; }
div#firstred { Farbe: rot; }

Mit dieser Syntax sagen Sie, dass Sie wollen das Stichworte, td -Tags, Absatz-Tags mit der Klasse red und das div-Tag mit der ID firstred erhalten alle die Stilfarbe rot.

Dies ist durchaus akzeptables CSS, aber es gibt zwei wesentliche Nachteile, es auf diese Weise zu schreiben:

  • Wenn Sie sich in Zukunft entscheiden, die Schriftfarbe dieser Eigenschaften in Blau umwandeln, müssen Sie diese Änderung viermal in Ihrem Stylesheet vornehmen.
  • Es fügt Ihrem Stylesheet viele zusätzliche Zeichen hinzu, die Sie nicht benötigen. Diese 4 Stile mögen nicht übertrieben erscheinen, aber wenn Sie dies über Ihr gesamtes Stylesheet hinweg tun, werden die Zeilen addiert und dieses Sheet wird viel, viel größer als es sein muss.

Um diese Nachteile zu vermeiden und Ihre CSS-Datei zu optimieren, werden wir versuchen, Kommas zu verwenden.

Verwenden von Kommas zum Trennen von Selektoren

Anstatt 4 separate CSS-Selektoren und 4 Regeln zu schreiben, können Sie kombinieren alle diese Stile in eine Regeleigenschaft, indem Sie die einzelnen Selektoren durch ein Komma trennen. So würde das gemacht:

th, td, p.red, div#firstred { color: red; } 

Das Kommazeichen fungiert im Grunde als das Wort "oder" innerhalb des Selektors. Das gilt also für das Tags ODER td Tags ODER Absatz-Tags mit der Klasse rot ODER dem div-Tag mit der ID firstred. Genau das hatten wir vorher, aber anstatt 4 CSS-Regeln zu benötigen, haben wir eine einzige Regel mit mehreren Selektoren. Dies ist, was das Komma im Selektor macht, es ermöglicht uns, mehrere Selektoren in einer Regel zu haben.

Dieser Ansatz sorgt nicht nur für schlankere, sauberere CSS-Dateien, sondern erleichtert auch zukünftige Updates. Wenn Sie nun die Farbe von Rot zu Blau ändern möchten, müssen Sie die Änderung nur an einer Stelle vornehmen, anstatt über die ursprünglichen 4 Stilregeln, die wir hatten! Denken Sie an diese Zeitersparnis für eine gesamte CSS-Datei und Sie können sehen, wie Sie dadurch auf lange Sicht sowohl Zeit als auch Platz sparen!

Syntaxvariation

Einige Leute entscheiden sich dafür, das CSS besser lesbar zu machen, indem sie jeden Selektor in einer eigenen Zeile trennen, anstatt wie oben alles in eine Zeile zu schreiben. So würde das gemacht:

th,
td,
p.rot,
div#firstred
{
Farbe Rot;
}

Beachten Sie, dass Sie nach jedem Selektor ein Komma setzen und dann mit "Enter" den nächsten Selektor in eine eigene Zeile umbrechen. Sie fügen nach dem letzten Selektor KEIN Komma hinzu.

Durch die Verwendung von Kommas zwischen Ihren Selektoren erstellen Sie ein mehr kompaktes Stylesheet das ist in Zukunft einfacher zu aktualisieren und heute einfacher zu lesen!

instagram story viewer