Sacha Greif offen gefragt ob CSS zu groß geworden ist. Mit all den Leckereien, die in den letzten Jahren in Browsern ausgeliefert wurden – Containerabfragen! Relative Farbsyntax! Kaskadenschichten! logische Eigenschaften! Reichweiten in Medienanfragen! individuelle Transformationen! :has() Wähler! – und alles, was sich am möglichen Horizont abzeichnet – CSS-Schalter! Nisten! Farbmischung! Scrollverknüpfte Animationen! Umfangreiche Stile! – Heutzutage gibt es definitiv eine andere Lernkurve für CSS, sowohl für neue als auch für erfahrene Front-Ender.
Es mag eine Zeit gegeben haben, in der es möglich war, die meisten CSS-Eigenschaften und ihre Funktionsweise zu kennen. Diese Zeiten sind lange vorbei, zumindest für einen alten Hasen wie mich. Aber das wirft irgendwie die Frage auf: welches CSS muss man unbedingt können?
Vincas Stonys kürzlich hat sich an einer Liste versucht. Chris eins zusammenstellen basierend auf Funktionen, die seit CSS3 veröffentlicht wurden. Sie haben wahrscheinlich eine Vorstellung davon, was Sie in eine Liste aufnehmen würden. Wenn ich eine Top 5 zusammenstellen müsste und mich nur auf Eigenschaften und Selektoren beschränken müsste, würde es ungefähr so aussehen…
writing-mode
Ich kann nicht genug über die sagen writing-mode Eigentum. Was es wichtig macht – insbesondere aus Lernperspektive – ist, dass es Sie auf integrative Prinzipien einrichtet, die das Erstellen von Layouts unabhängig von der Sprache des Benutzers berücksichtigen. Ein gutes Verständnis für writing-mode wird zu einem Verständnis von führen logische Eigenschaften und Werte, und diese wiederum bilden die Grundlage für das Verständnis des Dokumentenflusses und das Denken in Begriffen von block, inline, start und end eher als physikalische Richtungen.
display
Es fällt mir schwer zu glauben, dass jemand gutes CSS schreiben kann, ohne ein solides Verständnis dafür zu haben display Eigentum. Es ist sowohl eine Eigenschaft als auch ein Framework zum Erstellen von Layouts. Es gibt kein Flexbox- oder CSS-Grid ohne es, was es zu einer Art Torwächter zum Verständnis dieser wichtigen Funktionen macht.
Plus, die display Eigenschaft perfekt ergänzt writing-mode. Es ist genau das, was Sie einmal brauchen werden writing-mode hat Sie dem Dokumentenfluss und logischen Richtungen ausgesetzt. Sie benötigen eine Eigenschaft, um entweder den normalen Fluss eines Elements zu ändern (z. B. ein Blockelement in ein Inline-Element zu ändern) oder mit dem Layout zu beginnen (z. B. das Erstellen eines flexiblen Layoutkontexts) und das ist der Punkt display ins Spiel kommt.
margin / padding / border
Ugh, ich betrüge hier total, aber denke ans Lernen margin, padding und border zusammen ist irgendwie unvermeidlich. Sie sind alle Teile von Das Box-Modell, alle helfen bei Abstand und Styling und müssen alle kennengelernt werden CSS-Längeneinheiten. Wenn Sie wissen, wozu diese Eigenschaften gedacht sind und wie sie zur berechneten Größe eines Elements beitragen, haben Sie sicherlich viel mehr Kontrolle über das Styling und beseitigen jegliche Verwirrung darüber, warum ein Element die Größe hat, die es hat – ein häufiges CSS-Kopfschmerz!
::before und ::after
Noch eins, wo ich ein bisschen schummele. Ja, ::before und ::after sind zwei einzelne Pseudoelemente, aber ich kann mir nicht vorstellen, etwas über das eine ohne das andere zu lernen. Es ist ein Zweier!
Ich erinnere mich, wie überwältigend es für mich war zu erfahren, dass diese existierten und verwendet werden können, um daraus alles zu erschaffen coole UI-Effekte zu vervollständigen Single-Div-Illustrationen. Es eröffnet neue Möglichkeiten und gibt einen ersten Eindruck davon, wie leistungsfähig CSS wirklich ist.
@media
Uff, ich bin schon bei meinem fünften und letzten Punkt in der Liste und habe das Gefühl, dass noch so viel CSS-Güte hierher gehört. Aber wenn ich mich für eine letzte Sache entscheiden müsste, wäre es Medien-Anfragen. Wieso den? Weil es eine erstklassige Zutat für die Erstellung fließender, flexibler Layouts und unterschiedlicher Betrachtungskontexte ist. Containerabfragen könnte das am Ende von meiner Liste streichen, wenn es reift, aber jetzt, @media ist eine großartige Grundlage für responsives Design.
Darüber hinaus, @media ist ein netter erster Schritt in die bedingten Qualitäten von CSS. Ob wir eine Abfrage basierend auf dem verwendeten Gerätetyp schreiben (z. B. screen or print) oder wenn der Darstellungsbereich des Browsers bestimmte Kriterien erfüllt (z. B. width >= 768px), Die @media Syntax ist unglaublich nützlich, um Layouts zu erstellen, die für verschiedene Bedingungen optimiert sind.
Oh, und wir haben noch nicht einmal angesprochen, wie @media bezieht sich auf Zugänglichkeit, dank seiner Fähigkeit zu Anwenden von Stilen basierend auf den Vorlieben eines Benutzers (z.B, prefers-reduced-motion). Neben der Erstellung bedingter Layouts sind Medienabfragen also ein guter nächster Schritt zum Verständnis von inklusivem Design.
Ehrenvolle Erwähnungen
CSS in eine Liste von fünf Eigenschaften und Selektoren zu fassen, die man kennen muss, ist schwierig, besonders jetzt, wo CSS heute leistungsfähiger ist als beispielsweise vor fünf Jahren. Es gibt eine Reihe anderer Elemente, die ich wirklich einschließen wollte, wie (in keiner bestimmten Reihenfolge):
calc()has()colorfontoverflowposition(besonders das)z-index
Aber ich stehe zu meinen Entscheidungen. Das Erlernen von CSS ist wichtiger als das Auswendiglernen einer Liste von Eigenschaften. Es ist eine Reise, und ich denke, die fünf, die ich ausgewählt habe, bahnen einen netten kleinen Lernpfad, der die Voraussetzungen für das Schreiben guter Stilregeln und die nächsten Schritte zum tieferen Eintauchen in CSS schafft.
Okay, sag mir deine!
Nicht einverstanden mit meiner Liste? Du solltest! Ich wette, Sie haben einige kluge Meinungen und ich möchte sehen, wie Sie eine Top-5-Liste abgerundet hätten.
