Welches CSS musst du 2022 unbedingt kennen?

Sacha Greif wunderte sich offen, ob CSS nicht zu groß geworden ist. Mit all den Goodies, die in den letzten Jahren in den Browsern veröffentlicht wurden – Container Queries! Relative Farbsyntax! Kaskadenebenen! Logische Eigenschaften! Bereiche in Media Queries! Einzelne Transformationen! :has()-Selektor! — und all dem, was am möglichen Horizont liegt — CSS Toggles! Verschachtelung! Farbvermischung! Scroll-verknüpfte Animationen! Gekapselte Stile! — gibt es heutzutage definitiv eine andere Lernkurve für CSS, sowohl für neue als auch für erfahrene Frontend-Entwickler.

Es mag eine Zeit gegeben haben, in der es möglich war, die meisten CSS-Eigenschaften zu kennen und zu verstehen, wie sie funktionieren. Diese Zeiten sind lange vorbei, zumindest für einen alten Hasen wie mich. Aber das wirft die Frage auf: Welches CSS musst du unbedingt kennen?

Vincas Stonys hat sich kürzlich an einer Liste versucht. Chris hat eine zusammengestellt, die auf Funktionen basiert, die seit CSS3 veröffentlicht wurden. Du hast wahrscheinlich eine Vorstellung davon, was du in eine Liste aufnehmen würdest. Wenn ich eine Top 5 zusammenstellen und mich auf Eigenschaften und Selektoren beschränken müsste, könnte sie ungefähr so aussehen…

writing-mode

Ich kann nicht genug von der writing-mode Eigenschaft sagen. Was sie wichtig macht – besonders aus Lernperspektive – ist, dass sie dich auf inklusive Prinzipien vorbereitet, die Layouts unabhängig von der Sprache des Benutzers berücksichtigen. Ein gutes Verständnis von writing-mode führt zu einem Verständnis von logischen Eigenschaften und Werten, und diese wiederum bereiten den Weg zum Verständnis des Dokumentenflusses und zum Denken in Begriffen von block, inline, start und end anstelle von physikalischen Richtungen.

display

Ich kann mir kaum vorstellen, dass jemand gutes CSS schreiben kann, ohne ein solides Verständnis der display Eigenschaft zu haben. Sie ist sowohl eine Eigenschaft als auch ein Rahmenwerk zur Erstellung von Layouts. Ohne sie gäbe es kein Flexbox oder CSS Grid, was sie zu einer Art Türsteher macht, um diese wichtigen Funktionen zu verstehen.

Außerdem ergänzt die display Eigenschaft writing-mode perfekt. Sie ist genau das, was du brauchst, sobald writing-mode dich dem Dokumentenfluss und logischen Richtungen ausgesetzt hat. Du brauchst eine Eigenschaft, um entweder den normalen Fluss eines Elements zu ändern (wie z.B. ein Blockelement in ein Inline-Element zu ändern) oder um mit dem Layout zu beginnen (wie z.B. einen flexiblen Layoutkontext zu erstellen), und hier kommt display ins Spiel.

margin / padding / border

Ugh, hier schummele ich total, aber ich denke, das gemeinsame Erlernen von margin, padding und border ist irgendwie unvermeidlich. Sie sind alle Teil von The Box Model, helfen alle bei der Abstandsgestaltung und dem Styling und alle erfordern die Auseinandersetzung mit CSS-Längeneinheiten. Zu wissen, wofür diese Eigenschaften konzipiert sind und wie sie zur berechneten Größe eines Elements beitragen, gibt dir sicherlich viel mehr Styling-Kontrolle und klärt Verwirrung darüber auf, warum ein Element die Größe hat, die es hat – ein häufiger CSS-Kopfschmerz!

::before und ::after

Noch einer, bei dem ich ein wenig schummele. Ja, ::before und ::after sind zwei einzelne Pseudoelemente, aber auch hier kann ich mir nicht vorstellen, über das eine zu lernen, ohne das andere zu kennen. Das ist ein Zwei-für-Eins-Angebot!

Ich erinnere mich, wie überwältigend es für mich war zu erfahren, dass diese existieren und für alles Mögliche verwendet werden können, von coolen UI-Effekten bis hin zu kompletten Single-Div-Illustrationen. Es eröffnet neue Möglichkeiten und bietet einen ersten Einblick, wie mächtig CSS wirklich ist.

@media

Oof, ich bin schon bei meinem fünften und letzten Punkt auf der Liste und habe das Gefühl, es gibt immer noch so viele großartige CSS-Dinge, die hierher gehören würden. Aber wenn ich noch eine Sache wählen muss, dann sind es Media Queries. Warum? Weil sie eine Hauptzutat für die Erstellung von flüssigen, flexiblen Layouts und verschiedenen Ansichtskontexten sind. Container Queries könnten diesen Punkt von meiner Liste verdrängen, wenn sie ausgereifter sind, aber im Moment ist @media ein großartiger Einstieg in Responsive Design.

Darüber hinaus ist @media ein guter erster Schritt in die bedingten Qualitäten von CSS. Ob wir nun eine Abfrage basierend auf dem Gerätetyp (z.B. screen oder print) schreiben oder wenn der Browser-Viewport ein bestimmtes Kriterium erfüllt (z.B. width >= 768px), die @media Syntax ist unglaublich nützlich für die Erstellung von Layouts, die für verschiedene Bedingungen optimiert sind.

Oh, und wir haben noch gar nicht berührt, wie @media mit Barrierefreiheit zusammenhängt, dank seiner Fähigkeit, Stile basierend auf den Präferenzen eines Benutzers anzuwenden (z.B. prefers-reduced-motion). Medienabfragen sind also nicht nur zum Erstellen bedingter Layouts gut, sondern auch ein guter nächster Schritt zum Verständnis von inklusivem Design.

Ehrenvolle Erwähnungen

CSS in eine Liste von fünf Must-Know-Eigenschaften und Selektoren zu destillieren, ist schwierig, besonders jetzt, wo CSS mächtiger ist als noch vor, sagen wir, fünf Jahren. Es gibt eine Reihe von anderen Dingen, die ich wirklich einbeziehen wollte, wie (in keiner bestimmten Reihenfolge)

• calc()
• has()
• color
• font
• overflow
• position (besonders das)
• z-index

Aber ich stehe zu meinen Entscheidungen. CSS zu lernen ist wichtiger, als sich eine Liste von Eigenschaften zu merken. Es ist eine Reise, und ich denke, die fünf, die ich gewählt habe, bilden einen schönen kleinen Lernpfad, der die Grundlage für das Schreiben guter Stilregeln und nächste Schritte für ein tieferes Eintauchen in CSS legt.

Na los, sag mir deine!

Bist du mit meiner Liste nicht einverstanden? Das solltest du! Ich wette, du hast einige kluge Meinungen und ich möchte sehen, wie du eine Top 5 Liste zusammengestellt hättest.