Als Frontend-Entwickler haben wir im Laufe der Jahre viele Dinge gewünscht – Möglichkeiten, Dinge in CSS zu zentrieren, Stile zu kapseln, ein Seitenverhältnis für ein Element festzulegen, eine feinere Kontrolle über unsere Farben zu erhalten, ein Element basierend auf seinen Kindelementen auszuwählen, Ebenen der Spezifität zu verwalten, Elemente auf die Breite ihrer Eltern reagieren zu lassen… die Liste geht weiter und weiter.
Und jetzt, da wir alles haben, was wir uns gewünscht haben und noch mehr, fragen sich einige von uns – haben wir jetzt *zu viel* CSS?
Die dunklen Zeiten
Wenn Sie, wie ich, während der Anfänge von CSS in die Webentwicklung eingestiegen sind, erscheint die Idee, zu viel davon zu haben, lächerlich.
Früher bestand praktisch die gesamte Aufgabenbeschreibung eines Frontend-Entwicklers darin, mit den Einschränkungen von CSS umzugehen. Der clearfix hack, um Floats zu löschen, der 100% padding hack, um quadratische Divs zu erstellen, ganz zu schweigen von den semi-zufälligen Anwendungen von unzusammenhängenden Eigenschaften, um Internet Explorer dazu zu bringen, Ihre Befehle auszuführen.
Zu dieser Zeit war der Browser ein heimtückischer Feind, der durch pure List und arkane Beschwörungen besiegt werden musste. Heute wartet die perfekte Eigenschaft, nur eine Kopie und Einfügung von MDN entfernt.
Die neue Ära von CSS
Aber heute sind die Dinge ganz anders: Nicht nur bewegen sich die Dinge viel schneller, sondern Browser-Anbieter *kümmern sich tatsächlich* darum, Entwickler glücklich zu machen! Ich weiß, ich konnte es auch nicht glauben. Aber ich führe die jährliche State of CSS Entwicklerumfrage durch (die übrigens *jetzt geöffnet ist – machen Sie mit!*), und ich weiß mit Sicherheit, dass Browser-Entwicklungsteams die Umfrageergebnisse (neben vielen anderen Datenpunkten) zur Information ihrer Roadmap nutzen.
Darüber hinaus hat Google meine Arbeit an der Umfrage mitfinanziert und sogar Lea Verou eingestellt, um die Auswahl der diesjährigen Umfragefragen zu leiten.
Es ist nicht nur Google. Es ist in Mode gekommen, Safari und Apple im Allgemeinen zu beschimpfen (manchmal zu Recht), aber man kann nicht leugnen, wie leidenschaftlich jemand wie Jen Simmons dafür ist, Entwicklern zuzuhören und das Web zu verbessern.
Und nicht nur die Browser-Anbieter verbessern CSS auf eigene Faust; sie arbeiten sogar über Kampflinien hinweg mit Initiativen wie Interop 2023 zusammen, um Inkonsistenzen und Inkompatibilitäten zwischen Browsern zu reduzieren.
Zu viel des Guten?
Das Ergebnis all dessen ist, dass wir nun mit einer Fülle von CSS-Reichtümern konfrontiert sind, und es kann schwer sein, Schritt zu halten. CSS Grid wurde vor fast fünf Jahren in großen Browsern unterstützt, doch ich schaue jedes Mal nach, wenn ich es benutze. Und so cool subgrid auch scheint, ich habe es noch nicht einmal ausprobiert.
Bei der Auswahl, welche CSS-Funktionen in die State of CSS aufgenommen oder nicht aufgenommen werden sollten, haben Lea und ich viele Funktionen berücksichtigt, aber auch einige verworfen. Einige Beispiele für Funktionen, die wir *nicht* aufgenommen haben, sind
- Die
linear()easing function, mit der Sie easing curves feingranularer definieren können. - Die
env()function, mit der Sie von Browser oder Gerät definierte Variablen verwenden können. - Die
scrollbar-width-Eigenschaft, die zur Steuerung des Erscheinungsbilds einer Scrollbar dient. - Die
margin-trim-Eigenschaft, mit der Sie steuern können, wie sich die Ränder der Kindelemente eines Containers verhalten.
Dies sind alles potenziell sehr nützliche Funktionen und wären während der CSS-Dürre der vergangenen Jahre eine große Neuigkeit gewesen. Aber im heutigen Kontext müssen sie um Aufmerksamkeit mit viel größeren Ankündigungen kämpfen, wie dem has()-Selektor oder CSS-Verschachtelung!
Nicht begeistert
Wie Silvestar Bistrović schreibt, ist er „nicht so begeistert von all diesen neuen CSS-Funktionen.“ Dies fand ein Echo auf Twitter, wobei Sara Soueidan feststellte, dass es ihr um „Praktikabilität geht, nicht darum, wie glänzend eine Funktion im Moment aussieht.“
Das mag wie eine negative Einstellung erscheinen, aber ich denke, es ist verständlich. Niemand kann erwartet werden, mit so vielen neuen Funktionen Schritt zu halten!
Eine weitere unbeabsichtigte (oder vielleicht beabsichtigte?) Folge ist, dass, je komplexer CSS wird, desto höher wird die Hürde für jedes neue Unternehmen, das eine Browser-Engine entwickeln möchte – ganz zu schweigen von der zusätzlichen Arbeitsbelastung bei der Wartung und Dokumentation all dieser neuen Funktionen.
CSS-Übergriff
Es gibt auch die sehr berechtigte Sorge, dass CSS sich in Bereiche ausbreitet, für die es nicht ganz geeignet ist. Das ist etwas anderes, das Sara Soueidan bemerkte, als sie auf die neue experimentelle Implementierung von CSS Toggles reagierte (hier ist ein Ticket, das sie diskutiert)
Viele haben den sehr vernünftigen Punkt gemacht, dass diese Art von Verhalten am besten durch ein neues HTML-Element gehandhabt würde, anstatt den Toggle-Status rein über CSS zu verwalten, und dass CSS möglicherweise nicht das beste Medium ist, um sicherzustellen, dass Barrierefreiheitsfragen ordnungsgemäß behandelt werden.
Wenn CSS etwas übernimmt, das zuvor durch JavaScript gehandhabt wurde, wird dies im Allgemeinen als gute Sache angesehen, da es oft die Menge an Code reduziert, die der Browser laden muss. Ich bin also vorsichtig optimistisch bezüglich CSS Toggles und vertraue darauf, dass die CSS Working Group die Bedenken der Community ordnungsgemäß berücksichtigt. Aber es könnte eines Tages kommen, an dem wir uns Sorgen machen, dass CSS über seine Grenzen hinausgeht und in die Verantwortungsbereiche von HTML und JavaScript eingreift.
Neue Erwartungen
Und vielleicht muss sich das ändern: Vielleicht sollten wir die Erwartung aufgeben, dass CSS-Entwickler *alles* von CSS kennen müssen?
Diese Erwartung stammt aus der Zeit, als CSS ein nachträglicher Gedanke war, diese kleine nervige Syntax, die man lernen musste, um seine Schaltfläche blau und fett zu machen, genau wie der Kunde es verlangte. Aber ich denke, wir müssen akzeptieren, dass das heutige CSS vielleicht einfach viel zu groß ist, als dass eine einzelne Person es meistern könnte, insbesondere zusätzlich zu anderen Frontend-Aufgaben.
Wie Michelle Barker es ausdrückt
Und da lande ich selbst am Ende. Ich habe mich damit abgefunden, dass ich wahrscheinlich nie alle möglichen CSS-Funktionen verwenden – oder sogar davon wissen – werde. Und das kommt von jemandem, der *eine Umfrage zu CSS leitet*!
Aber diese neuen Funktionen werden sicherlich für *jemanden* nützlich sein. Jemand wird Blog-Beiträge darüber schreiben, coole CodePens damit erstellen, Vorträge darüber halten. Diese Person wird ein cooler, junger, energiegeladener Entwickler sein, der noch alle Haare hat. Mit anderen Worten, es wird nicht ich sein – und das ist in Ordnung.
Und vielleicht machen Sie sich Sorgen, dass dieser neue Entwickler von all den Dingen, die er auf einmal lernen muss, überwältigt sein wird. Aber bedenken Sie all die Dinge, die er *nicht* lernen muss, gerade weil sie durch diese neueren Alternativen ersetzt wurden. Ich würde diesen Handel jederzeit eingehen.
Aber denken Sie darüber nach: In den letzten Jahren gab es nicht nur einen enormen Anstieg der Anzahl von Geräten, die wir berücksichtigen müssen, sondern wir haben auch angefangen zu erkennen, dass wir alle das Web auf etwas unterschiedliche Weise konsumieren, sei es aufgrund von Behinderungen, dem aktuellen Kontext oder einfach persönlichen Vorlieben. Sollte CSS sich nicht an diese neue Realität anpassen?
Nun, ich muss gestehen, das hat mich alles ein wenig nostalgisch gemacht… also entschuldigen Sie mich, während ich ein paar Floats lösche, nur aus alter Gewohnheit.
Wie erwähnt, ist die jährliche State of CSS Umfrage jetzt geöffnet. Egal, ob Sie denken, es gibt zu viel CSS oder nicht, die Umfrage ist eine großartige Möglichkeit, Browserentwicklern mitzuteilen, wie Sie sich fühlen. Füllen Sie sie also aus, wenn Sie 10 Minuten Zeit haben.
Vielleicht muss es in Zukunft eine Neubewertungsphase geben: eine Zeit, in der man zurücktritt und sagt: „Welche Funktionen können wir hinzufügen, die drei andere ersetzen und gleichzeitig das mentale Modell vereinfachen?“ Oder: „Welche Funktionen können entfernt werden, weil es bereits bessere Wege gibt, jede mögliche Verwendung des alten Weges zu erreichen?“
Ich frage mich, ob Houdini und die Systeme zur Hinzufügung echter logischer Programmierung zur Definition von Layout und Stilen weit dazu beitragen werden, die Notwendigkeit von so vielen spezifischen deklarativen Eigenschaften in CSS zu beseitigen.
Danke für den Artikel, ich dachte dasselbe – die Vision, die kleinsten Details des Aussehens und Verhaltens einer Website zu kontrollieren, ist aufregend – aber es wird zu viel – es war früher möglich, sich die Namen zu merken und vorherzusagen, wie fast alle Eigenschaften funktionieren würden :)
Gab es jemals die Erwartung, dass ein Entwickler die gesamte CSS-Spezifikation im Kopf haben sollte?
Diejenigen, denen a11y am Herzen liegt, sind proaktiv darin, Funktionen hinzuzufügen, die die Implementierung von a11y erleichtern.
Diejenigen, die fordern, dass das Web aus Gründen der Barrierefreiheit einfriert, stagnieren einfach.
Ich bin einer der neuen Entwickler, über die Sie sprechen (ca. 1 Jahr autodidaktisch gelernt) und bin hier, um zu bezeugen, dass Vanilla CSS von Grund auf ziemlich einfach zu lernen ist und sich überhaupt nicht überwältigend anfühlt. Ich kenne alles, was ich regelmäßig benutze (einschließlich Grid/Flex) und suche den Rest auf MDN oder hier nach, wenn es sich als nützlich erweist; also nicht wirklich anders als die Verwendung einer großen API, außer dass CSS sehr gute Dokumentation hat ;-)
Wenn ich einen Browser betreiben würde, würde ich mich definitiv auf DeveX konzentrieren. Je mehr Web-Apps es im Vergleich zu nativen Apps gibt, desto mehr Macht und Intelligenz können die Browser sammeln. (Ich schätze, wir haben ein Problem, wenn sie anfangen, Werbung einzuschleusen…)
Ich hätte lieber 100 neue Funktionen, für die die Leute nicht unbedingt begeistert waren, als nur ein paar, für die die Leute begeistert waren.
Solange diese 100 das Erstellen von Websites, wie ich sie aussehen und sich verhalten lassen wollte, viel einfacher gemacht haben. Es sollte um Praktikabilität gehen, nicht um Aufregung.
Betrachten Sie, dass es mehr als eine Million Wörter in der englischen Sprache gibt, von denen etwa 170.000 Wörter derzeit in Gebrauch sind und 20.000-30.000 Wörter von jeder einzelnen Person verwendet werden.
Hören wir auf, neue Wörter hinzuzufügen, die heute relevant sind, oder werfen wir die 830.000 Wörter weg, die derzeit nicht verwendet werden?
Ich würde vorschlagen, dass dies ähnlich wie Ihre Frage ist, ob es zu viel CSS gibt.
Natürliche Sprachen sind keine deklarativen Sprachen. CSS läuft Gefahr, zu C++ zu werden, man kann 1 Sache auf 10 Arten tun, was schlecht ist, und in einem Ökosystem von Frameworks und Bibliotheken spaltet es die Community weiter. Bei natürlichen Sprachen ist die Welt auch durch Sprache gespalten, zu viele Möglichkeiten, Brot zu sagen.l
Nicht wirklich. Das Erstaunliche an all den zusätzlichen CSS-Funktionen (und verdammt, auch an denen in JavaScript) ist, dass sie die Anzahl der Dinge erhöhen, die Sie erstellen können, und Ihnen weitaus mehr Möglichkeiten für interessante Websites und Apps bieten.
Während ich bestimmte Funktionen vielleicht nicht jetzt benutze, finden andere vielleicht interessante Verwendungen dafür in Zukunft. Und schaffen wahrscheinlich all die Dinge, die ich mir als Ergebnis nie vorgestellt hätte.
Ich war schon Webentwickler, als wir 9 Bilder und eine Tabelle verwenden mussten, um eine Box mit abgerundeten Ecken und einer Hintergrundtextur zu erhalten. Ja, viele der neueren Funktionen sind unglaublich nützlich!
Und ich hatte wirklich das Gefühl, dass sich das W3C, WHATWG und die Browseranbieter viel mehr darauf konzentrieren, Funktionen zu entwerfen und zu implementieren, die die Leute tatsächlich brauchen, um ihre tägliche Arbeit zu erledigen. Die Verwendung von Floats für ein Multi-Column-Layout war damals in Ordnung, aber die Verwendung von Flexbox und Grid fühlt sich einfach so viel besser an, als sich mit dem Gedanken an einen clearfix auseinandersetzen zu müssen.
Heutzutage brauchen wir viel weniger seltsame Hacks, um das zu erreichen, was wir brauchen, was den Code einfacher lesbar machen sollte. Aber jetzt, da wir so viele großartige Funktionen zur Verfügung haben, führt die feingranulare Kontrolle über jeden Aspekt eines Designs oft zu 100 Zeilen CSS für eine Schaltfläche und vielen Abstraktionsebenen mit benutzerdefinierten Eigenschaften.
Darüber hinaus gibt es viele Eigenschaften von fragwürdigem Nutzen wie
will-change,containodercontain-intrinsic-size. Natürlich sind dies willkommene Ergänzungen für komplexe Apps, aber viele Entwickler spüren den Druck, diese auch in eher einfachen Projekten zu verwenden, was unnötige Komplexität mit wenig Gewinn hinzufügt.Für mich gibt es zu viel CSS, um alles im Detail zu lernen, aber andererseits: Vielleicht muss man auch nicht mehr alles lernen.
Das W3C zeigt derzeit 559 verschiedene Eigenschaftsnamen, also wurden offensichtlich 11 Eigenschaften seit dem 5. Oktober hinzugefügt!
Für mich hat sich CSS von einfach und nützlich zu frustrierend entwickelt. Ich mache keine CSS-Entwicklung den ganzen Tag, es ist nur eine der Technologien, die ich manchmal verwenden muss. An diesem Punkt scheint es keine Sprache mehr für Menschen zu sein.
Es sollte viel bessere visuelle Editoren geben, um Bildschirm (leser)-Elemente, ihre Definition, ihr Layout, ihre Übergänge usw. zu entwickeln und das eigentliche CSS zu produzieren, das in die Produktion geht. Machen Sie die Trennung zwischen Design und Entwicklung rückgängig, wir sind alle im selben Team.
CSS-Funktionen sind da, um so viel Flexibilität wie möglich zu bieten, um genau das zu gestalten, was sich Designer vorstellen. Es ist großartig, wie es sich entwickelt.
Wenn jemand das Gefühl hat, CSS habe zu viele Funktionen, bedeutet das, dass es nichts für ihn ist.
Vielleicht werden sich die Jobs wieder in spezialisiertere aufteilen.
Also beschweren sich die Leute über zu viel CSS, aber es stört sie nicht, dass jeden Tag ein neues JS-Framework auftaucht?
Gibt es einen Mechanismus, um veraltete CSS-Funktionen abzuschaffen oder zu entfernen? Sicherlich können nicht alle davon der aktuelle erwartete Weg sein, um das Problem des Layouts und Stylings anzugehen.
Wir sind für HTML-Updates auf „evergreen“ Browser umgestiegen. Nutzen wir das doch, um CSS zu vereinfachen.
Auch wenn es noch Jahre dauern wird, bis wir den Standard mit einem CSS 3000 aufräumen können, und wir nur noch Funktionen als „Legacy“-Unterstützung markieren können, wäre die Definition eines vernünftigen, modernen, nutzbaren Teilmengen ein großer Schritt nach vorn.
Während ich teilweise zustimme (Tab-Karussells und dergleichen sind *etwas* zu verallgemeinert), stimme ich Ihrer Aussage nicht zu, dass CSS „zu komplex“ geworden ist.
CSS ist das primäre Mittel, mit dem Programmierer Websites gestalten. Aufgrund der schieren Vielfalt der Möglichkeiten, wie Menschen Elemente gestalten möchten, ist die Vielfalt der CSS-Funktionen wohl notwendig.
Ich mag, wie CSS Komplexität verwaltet: Eigenschaften (grob) in zwei Klassen aufteilen. Einerseits haben Sie „Common CSS“ (ein Begriff, den ich mir ausdenke). Dies ist die überschaubare kleine Menge an Funktionen, die jeder jeden Tag verwendet, wie
marginundfont-size. Heutzutage könnten Sie auchborder-radiusundbox-shadowaufgrund ihrer Verbreitung in modernen ästhetischen Stilen einschließen. Andererseits gibt es auch „Advanced CSS“, eine *riesige* Sammlung spezialisierter Funktionen, die selten verwendet werden, aber dennoch äußerst wertvoll sind, wann immer Sie das tun müssen, was sie handhaben (ein gutes Beispiel ist dielinear()easing function, die Sie erwähnt haben). Sie müssen Advanced CSS nicht auswendig kennen, um gutes CSS zu schreiben; es reicht aus, Common CSS zu kennen und die MDN-Dokumentation nach Advanced CSS-Funktionen durchsuchen zu können.Je mehr Wissen wir über CSS haben, desto schwerer ist es, Schritt zu halten
@Moaz, Sie haben Recht, nicht nur wird CSS fortschrittlicher, sondern eine überwältigende Menge an CSS ist in vielen Websites enthalten. Nach einiger Recherche können Sie sehen, dass CSS während der Entwicklung tendenziell abweicht und Stile und Eigenschaften nutzlos und verlassen werden. Ich habe einen Artikel gefunden, der irgendwie interessant war, über das Entfernen von totem Code: https://appcode.app/how-to-remove-unused-css/
Sie haben Recht, es sollte einige Entwicklungen geben, um die Arbeit mit CSS zu erleichtern.
Ich war lange Zeit ein spezialisierter HTML/CSS-Entwickler. Ich wurde von vielen Unternehmen speziell wegen meiner Fähigkeiten eingestellt, .PSD-Dateien in HTML zu übersetzen, sogar vor CSS. Dann kamen die dunklen Tage der CSS-Hacks für unterstützte Browser (&*^%$ IE6,7,8,9). Jetzt wollen Unternehmen keine Spezialisten mehr, sie wollen Full-Stack-Experten für alles, einschließlich DBA. Es ist amüsant zuzusehen, wie Junior-Ingenieure das Neueste und Beste CSS verwenden, das nur von Chrome oder Edge unterstützt wird, und frustriert sind, wenn es nicht für Firefox oder Safari oder eine der 12000 Varianten von Mobile Chrome funktioniert.
Ich schätze all die schicken neuen CSS-Funktionen, aber heiliger Strohsack, die Lernkurve kann ziemlich steil sein. Aber sehr oft funktionieren weniger sexy Techniken einwandfrei, ohne viel Aufwand.