CSS Grundlagen: Die Syntax, die zählt & Die Syntax, die nicht zählt

Wenn man ganz am Anfang anfängt, mit CSS zu spielen, muss man sich, wie bei jeder anderen Sprache, erst an die Syntax gewöhnen. Wie bei jeder Syntax gibt es eine Reihe kleiner Dinge, die man wissen muss. Einige Zeichen und ihre Platzierung sind sehr wichtig und notwendig, damit CSS korrekt funktioniert. Und einige Zeichen sind eher für einen sauberen Code und allgemein befolgte Standards wichtig, aber für die Funktionalität von CSS nicht entscheidend.

Zuerst, damit wir die Terminologie geklärt haben

Wichtig: Klammern

Alle CSS-Regelsätze müssen öffnende und schließende geschweifte Klammern haben

Wenn Sie die öffnende Klammer vergessen, liest CSS weiter, als wäre der nächste Textteil immer noch Teil des Selektors. Dann wird wahrscheinlich ein Zeichen wie ; gefunden, das als Teil eines Selektors ungültig ist und zu einem Fehler führt. Ein Fehler bedeutet wahrscheinlich, dass es sich selbst und den nächsten Regelsatz durcheinander bringt und sich danach wieder fängt.

Das Fehlen einer schließenden Klammer ist etwas schlimmer, da es wahrscheinlich den Rest der gesamten CSS-Datei durcheinander bringt, es sei denn, es findet irgendwie eine doppelte schließende Klammer und kann die erste fehlende dann auflösen.

Gesamtpunkt: Klammern sind sehr wichtig!

Präprozessorsprachen wie Sass und Less bieten eine Syntaxfunktion namens Nesting. Dies kann praktisch sein, aber beachten Sie, dass diese Verschachtelung entfernt wird, wenn diese Präprozessoren ausgeführt werden und CSS erzeugen, da CSS allein dies nicht unterstützt. Wenn Sie verschachteltes CSS in reguläres CSS kopieren, werden Sie Probleme mit den Klammern haben.

Manchmal Wichtig: Leerzeichen

Es gibt nur wenige Stellen, an denen Leerzeichen in CSS wichtig sind. Einer der wichtigsten ist in Selektoren. Ein Leerzeichen in einem Selektor bedeutet, dass Sie Nachfahren des vorherigen Teils des Selektors auswählen. Der Selektor body p bedeutet "wähle p-Elemente aus, die Nachfahren des body-Elements sind". Dieses Leerzeichen bedeutet viel. Hoffentlich ist es klar anders als bodyp, was nichts auswählen wird (es gibt kein <bodyp>-Element). Aber es ist nicht anders als body p. Mehrere Leerzeichen bedeuten dasselbe wie ein Leerzeichen.

Sie können keine Leerzeichen in Eigenschaften, Funktionsnamen oder überall dort einfügen, wo Sie Namen vergeben. Das Hinzufügen von Leerzeichen in diesen Situationen ändert effektiv die Namen und macht sie kaputt.

Abgesehen davon spielt das Leerzeichen in CSS keine große Rolle.

Ich ermutige Sie, konsistent mit Ihren Leerzeichen zu sein und einen sauberen und lesbaren CSS-Code zu erstellen. Sie könnten sich einige CSS-Styleguides ansehen, um einige bewährte Formatierungspraktiken zu erhalten.

Selbst die Regel !important in CSS, die nach einem Wert in einer Deklaration steht, wie z. B. body { background: white !important; }, hat keine Leerzeichenanforderungen. Sie könnte davor beliebig viel oder gar kein Leerzeichen haben.

Das Entfernen von Leerzeichen in CSS ist tatsächlich eine bewährte Methode für die Leistung, sodass Sie vielleicht bemerken, dass dies beim Betrachten des rohen CSS von Websites in Produktion der Fall ist.

Es ist besser, die Minifizierung von CSS einem Tool zu überlassen, das Ihr CSS für Sie verarbeitet, und das Original unberührt zu lassen. Wir werden die Optionen dafür in anderen Beiträgen behandeln müssen.

Größtenteils Wichtig: Semikolons

Jede Deklaration in einem Regelsatz (ein Paar aus Eigenschaft und Wert) endet mit einem Semikolon. Dieses Semikolon ist erforderlich, andernfalls liest CSS die nächste Eigenschaft weiter, als wäre sie Teil des Werts der vorherigen Deklaration.

Sie können das Semikolon bei der letzten Deklaration in einem Regelsatz weglassen. Ich warne davor, dass die manuelle Ausführung davon mehr Ärger als Nutzen bringt und am besten Minifizierungstools überlassen wird.

Wichtig: Vermeiden von zufälligen Zeichen

Das ist in jeder Sprache wichtig. Jedes Zeichen im Code ist wichtig, daher werden zufällige andere Zeichen fast sicher Dinge kaputt machen.

Nicht Wichtig: Zeilenumbrüche

Ein Zeilenumbruch wird wie jedes andere Leerzeichen in CSS behandelt, also verwenden Sie ihn nach Belieben, solange er keine anderen Leerzeichenregeln bricht, wie wir oben besprochen haben.

---

Alles in allem ist die CSS-Syntax nicht so schwer. Viel Erfolg!