CSS-Frameworks oder CSS-Grid: Was sollte ich für mein Projekt verwenden?

Veröffentlicht: 2022-03-10
Kurze Zusammenfassung ↬ Haben Sie jemals darüber nachgedacht, ob CSS Grid tatsächlich die Notwendigkeit von CSS-Frameworks oder Komponentenbibliotheken von Drittanbietern ersetzen kann? Dabei entdeckte Rachel Andrew eine Reihe von Gründen, warum Menschen ein Framework von Drittanbietern verwenden, und die positiven und negativen Aspekte, die damit verbunden sind.

Zu den Fragen, die mir am häufigsten gestellt werden, gehört eine Abwandlung der Frage: „Soll ich CSS Grid oder Bootstrap verwenden?“ In diesem Artikel gehe ich dieser Frage nach. Sie werden feststellen, dass die Gründe für die Verwendung von Frameworks vielfältig sind und sich nicht nur auf die Verwendung des in diesem Framework enthaltenen Grid-Systems konzentrieren. Ich hoffe, dass ich Ihnen durch das Auspacken dieser Gründe helfen kann, Ihre eigene Entscheidung zu treffen, was das Beste für die Websites und Anwendungen ist, an denen Sie arbeiten, und auch für das Team, mit dem Sie zusammenarbeiten.

Wenn ich in diesem Artikel über ein Framework spreche, beschreibe ich ein CSS-Framework eines Drittanbieters wie Bootstrap oder Foundation. Sie könnten argumentieren, dass dies wirklich Komponentenbibliotheken sind, aber viele Leute (einschließlich ihrer eigenen Dokumente) würden sie als Framework beschreiben, also werden wir das hier verwenden. Wichtig ist, dass diese extern von Ihnen entwickelt werden, ohne Bezug zu Ihren spezifischen Themen. Die Alternative zur Verwendung eines Drittanbieter-Frameworks besteht darin, Ihr eigenes CSS zu schreiben – das kann die Entwicklung Ihres eigenen internen Frameworks, die Verwendung einer Reihe gemeinsamer Dateien als Ausgangspunkt oder die Erstellung jedes Projekts als eine neue Sache beinhalten. All diese Dinge werden eher in Bezug auf Ihre eigenen spezifischen Bedürfnisse als auf sehr allgemeine Bedürfnisse durchgeführt.

Warum ein CSS-Framework wählen?

Die Frage, ob Grid oder ein Framework verwendet werden soll, ist fehlerhaft, da CSS Grid kein Drop-in-Ersatz für die Dinge ist, die ein CSS-Framework tut. Bei jeder Untersuchung des Themas muss berücksichtigt werden, was von unserem Framework CSS Grid ersetzt wird. Ich wollte zunächst herausfinden, warum sich die Leute überhaupt für die Verwendung eines CSS-Frameworks entschieden haben. Also wandte ich mich an Twitter und postete diesen Tweet.

Es gab viele Rückmeldungen. Wie ich erwartet habe, gibt es weitaus mehr Gründe, ein Framework zu verwenden, als nur das darin enthaltene Grid-System.

Mehr nach dem Sprung! Lesen Sie unten weiter ↓

Ein Framework gibt Ihrem Team fertige Dokumentation

Wenn Sie mit mehreren anderen Entwicklern an einem Projekt arbeiten, muss jedes interne System, das Sie erstellen, auch Dokumentation enthalten, damit Ihre Teammitglieder es effektiv nutzen können. Das Erstellen einer nützlichen Dokumentation ist eine zeitaufwändige, qualifizierte Arbeit an sich, und etwas, das die großen Frameworks sehr gut können.

Screenshot der Homepage der Bootstrap-Dokumentation
Die Bootstrap-Dokumentation. (Große Vorschau)

Framework-Dokumentationen tauchten immer wieder auf, und viele erfahrene Front-End-Entwickler mischten sich ein und erklärten, warum sie ein CSS-Framework empfehlen und verwenden würden. Ich höre manchmal die Meinung, dass Leute Frameworks verwenden, weil sie sich nicht wirklich mit CSS auskennen, viele der Antwortenden sind mir jedoch als erfahrene CSS-Entwickler bekannt. Ich bin mir sicher, dass sie manchmal frustriert sind über die Entscheidungen, die das Framework getroffen hat, aber die positiven Aspekte dieser Entscheidung überwiegen.

Online-Communities: Einfacher Zugang zur Hilfe

Wenn Sie sich entscheiden, ein bestimmtes Tool zu verwenden, gewinnen Sie auch eine Community von Benutzern, die Sie um Hilfe bitten können. Wenn Sie kein sehr klares CSS-Problem haben und einen reduzierten Anwendungsfall vorlegen können, um es zu demonstrieren, kann es schwierig sein, um Hilfe mit CSS zu bitten. Dies ist insbesondere der Fall, wenn Sie fragen möchten, wie Sie eine bestimmte Komponente erstellen sollen. Die Verwendung eines Frameworks kann Ihnen einen Ausgangspunkt für Ihre Frage geben; Im Allgemeinen werden Sie fragen, wie Sie eine bestimmte Komponente ändern oder gestalten können, anstatt von vorne zu beginnen. Das ist einfacher zu fragen und auch leichter zu beantworten.

Das Grid-System

Trotz der Tatsache, dass wir CSS Grid haben, antworteten viele Leute, dass der Hauptgrund, warum sie sich für die Verwendung eines Frameworks entschieden haben, das Grid-System war. Natürlich wurden viele dieser Projekte möglicherweise lange vor der Verfügbarkeit von CSS Grid gestartet. Noch heute können jedoch Bedenken hinsichtlich der Abwärtskompatibilität oder des Teamverständnisses neuer Layoutmethoden dazu führen, dass sich Benutzer für die Verwendung eines Frameworks entscheiden, anstatt natives CSS zu übernehmen.

Geschwindigkeit der Projektabwicklung

Wenn Sie sich für ein Framework entscheiden, können Sie Ihr Projekt im Allgemeinen viel schneller liefern, insbesondere wenn dieses Projekt sehr gut zu der Arbeitsweise des Frameworks passt und nicht viel Anpassung erfordert.

Im Falle der Entwicklung eines MVP für eine neue Idee kann ein Framework durchaus eine ausgezeichnete Wahl sein. Sie haben viele Dinge, für die Sie Zeit aufwenden können, und testen immer noch Annahmen in Bezug auf die Anforderungen des Projekts. In der Lage zu sein, diese erste Version mithilfe eines Frameworks zu entwickeln, kann Ihnen helfen, das Produkt den Benutzern schneller zur Verfügung zu stellen und viel Zeit für die Entwicklung von Dingen zu sparen, die Sie dann nicht verwenden möchten.

Ein weiterer Ort, an dem Geschwindigkeit und ein Haufen vorgefertigter Komponenten sehr nützlich sein können, ist die Entwicklung des Backend-Verwaltungssystems für eine Website oder Anwendung. In dem Fall, in dem Sie nur ein paar Verwaltungsbildschirme erstellen müssen, kann ein Framework viel Zeit beim Gestalten von Formularfeldern und anderen Komponenten sparen! Es gibt sogar Dashboard-Designs für Bootstrap und Foundation, die einen hilfreichen Ausgangspunkt bieten können.

Screenshot eines Dashboard-Kits für Foundation
Sammlungen von Dasboard-Komponenten beschleunigen das Erstellen des Administrators für eine App. (Große Vorschau)

Ich bin kein Designer!

Dieser Punkt ist der Grund, warum ich mich in der Vergangenheit für ein CSS-Framework entschieden habe. Ich bin kein Designer, und wenn ich etwas sowohl entwerfen als auch bauen muss, verbringe ich viel Zeit damit, Designentscheidungen zu treffen, für die ich völlig unqualifiziert bin. Es wäre schön, die Mittel zu haben, um einen Designer für jedes Nebenprojekt einzustellen, aber das habe ich nicht, und daher könnte ein Framework den Unterschied ausmachen, ob das Ding ausgeliefert wird oder nicht.

Umgang mit CSS-Bugs und Browser-Kompatibilitätsproblemen

Weniger erwähnt als ich dachte, war die Tatsache, dass sich die Autoren des Frameworks bereits mit Browserproblemen befasst haben, sei es aufgrund tatsächlicher Fehler oder fehlender Unterstützung für bestimmte Funktionen. Für viele Menschen war dies jedoch immer noch ein Faktor bei der Entscheidungsfindung.

Um beim responsiven Design zu helfen

Dies kam ein paar Mal vor; Die Leute entschieden sich für ein Framework, insbesondere weil es reaktionsschnell war oder weil ich für sie Entscheidungen über Breakpoints traf. Ich fand es interessant, dass dies speziell als Faktor bei der Entscheidung für die Verwendung eines Frameworks genannt wurde.

Warum nicht ein Framework verwenden?

Zu den positiven Gründen, warum Frameworks ausgewählt wurden, gehörten einige der Probleme, die Menschen mit dieser Wahl hatten.

Schwierigkeit, Rahmencode zu überschreiben

Viele Leute kommentierten die Tatsache, dass es schwierig werden könnte, den im Framework verwendeten Code zu überschreiben, und dass Frameworks eine gute Wahl seien, wenn sie nicht viele Überschreibungen benötigen. Die Vorteile der Benutzerfreundlichkeit und des Verständnisses aller im Team, wie das Framework verwendet wird, können verloren gehen, wenn dann eine große Anzahl von Anpassungen vorhanden ist.

Alle Websites sehen am Ende gleich aus

Die Schuld dafür, dass alle Websites anfangen, gleich auszusehen, wurde direkt den bekannten CSS-Frameworks zugeschrieben. Ich habe Websites gesehen, bei denen ich sicher bin, dass ein bestimmtes Framework verwendet wurde, und dann festgestellt, dass es sich um benutzerdefiniertes CSS handelt, so weit verbreitet sind die in diesen Frameworks getroffenen Designentscheidungen.

Die bereits erwähnte Schwierigkeit beim Überschreiben von Framework-Stilen ist ein großer Teil der Gründe, warum Websites, die unter Verwendung eines bestimmten Frameworks entwickelt wurden, dazu neigen, ähnlich auszusehen. Dies ist nicht nur ein kreatives Problem, es kann sehr seltsam sein, wenn ein Benutzer einiger Websites, die sich alle für dasselbe Framework entschieden haben, das Gefühl hat, dass sie alle dasselbe sind. In Bezug auf die Vermittlung Ihrer Marke und die Einbeziehung einer guten Benutzererfahrung verlieren Sie vielleicht etwas, wenn Sie sich für die generischen Optionen eines Frameworks entscheiden.

Die CSS-Probleme der ganzen Welt erben

Ob Front- oder Backend, jedes Tool oder Framework, das den Mainstream erreichen will, muss möglichst viele Probleme lösen. Wenn das Tool nicht eng an die Lösung eines bestimmten Anwendungsfalls gekoppelt ist, enthält es eine Menge sehr allgemeinen Codes und Code, der Probleme löst, die Sie nicht haben und nie haben werden.

Möglicherweise befinden Sie sich in der glücklichen Lage, dass Sie nur Ihre volle Erfahrung benötigen, um in den aktuellsten Browsern angezeigt zu werden, was eine eingeschränktere Erfahrung in Internet Explorer oder älteren Versionen von Chrome ermöglicht. Die Verwendung eines Frameworks mit viel integrierter Unterstützung, das bis in den IE9 zurückreicht, würde zu viel zusätzlichem Code führen – insbesondere angesichts der kürzlichen Verbesserungen des CSS-Layouts. Es könnte Sie auch daran hindern, kreativ zu sein, da alles im Framework diese Anforderung für die Unterstützung annimmt. Dinge, die mit CSS möglich sind, können durchaus durch das Framework eingeschränkt werden.

Beispielsweise können die Rastersysteme in gängigen Frameworks keine Zeilen überspannen, da es in Layoutsystemen vor dem Rasterlayout kein Konzept oder Zeilen gibt. CSS Grid Layout ermöglicht dies problemlos. Wenn Sie an das Bootstrap-Grid gebunden sind und Ihr Designer ein Design entwickelt, das Elemente enthält, die sich über Zeilen erstrecken, können Sie es nicht implementieren – obwohl Grid möglicherweise von Ihren Zielbrowsern unterstützt wird.

Performance-Probleme

Im Zusammenhang mit dem oben Gesagten stehen Leistungsprobleme, die der Verwendung von ziemlich generischem Code innewohnen, anstatt von etwas, das für die genauen Anwendungsfälle optimiert ist, die Sie haben. Wenn Sie versuchen, die Leistung zu verbessern, werden Sie feststellen, dass Sie gegen die Entscheidungen des Frameworks stoßen.

Erhöhte technische Schulden

Während ein Framework eine großartige Möglichkeit sein könnte, Ihr Startup schnell auf den Weg zu bringen, und Sie zum Zeitpunkt dieser Entscheidung sicher sind, dass Sie es ersetzen werden, gibt es einen Plan, dies zu verwirklichen?

Ein Framework lernen, anstatt CSS zu lernen

Bei Gesprächen mit Konferenz- und Workshop-Teilnehmern habe ich festgestellt, dass viele Menschen bisher nur ein Framework zum Schreiben von CSS verwendet haben. Es ist nichts falsch daran, über eines dieser Tools in die Webentwicklung einzusteigen, angesichts der Komplexität der heutigen Webplattform stelle ich mir vor, dass dies für viele Menschen der Einstieg sein wird. Es kann jedoch zu einer karrierebegrenzenden Entscheidung werden, insbesondere wenn der Rahmen, auf dem Sie Ihre Fähigkeiten aufgebaut haben, in Ungnade fällt.

Frontend-Entwickler ohne CSS-Kenntnisse zu haben, sollte ein Unternehmen beunruhigen. Es macht es unglaublich schwierig, sich von diesem Framework zu entfernen, wenn Ihr Team nicht wirklich versteht, wie man CSS ohne es macht. Dies ist zwar kein wirklicher Grund, kein Framework zu verwenden, aber es ist etwas, das Sie bei der Verwendung eines Frameworks beachten sollten. Sie würden hoffen, dass das Team am nächsten Tag bereit ist, sich etwas Neuem zu widmen, ohne sich daran erinnern (oder zum ersten Mal lernen) zu müssen, wie man CSS schreibt!

Die Auswahl berücksichtigt keine Endbenutzer

Nicole Sullivan stellte ein paar Tage vor meiner Frage so ziemlich dieselbe Frage, als ich darüber nachdachte, diesen Artikel zu schreiben, obwohl sie Front-End-Frameworks als Ganzes und nicht nur CSS-Frameworks in Betracht zog. Jeremy Keith bemerkte, dass genau null der Antworten Endbenutzer betrafen. Dies war auch bei den Antworten auf meine Frage der Fall.

Vergessen wir in unserem Wettlauf, unsere Seite schnell aufzubauen, unserem Wunsch, die Dinge für uns als Designer und Entwickler der Seite so gut wie möglich zu machen, für wen wir das tun? Stimmen die vom Framework-Entwickler getroffenen Entscheidungen mit den Bedürfnissen der Benutzer der Website überein, die Sie erstellen?

Können wir Frameworks durch „Vanilla“-CSS ersetzen?

Wenn Sie erwägen, Ihr Framework zu ersetzen oder ein neues Projekt ohne eines zu starten, was könnten Sie beachten, um diesen Prozess zu vereinfachen?

Verstehen Sie, welche Teile des Frameworks Sie benötigen

Wenn Sie die Verwendung eines Frameworks durch Ihr eigenes CSS ersetzen, wäre es ein guter Anfang, Ihre Verwendung des aktuellen Frameworks zu überprüfen. Finden Sie heraus, was Sie verwenden und warum. Überlegen Sie, wie Sie diese Dinge im neuen Design ersetzen werden.

Sie könnten einem ähnlichen Prozess folgen, wenn Sie darüber nachdenken, ob Sie ein Framework auswählen oder Ihr eigenes schreiben sollen. Welche Teile davon könnten Sie vernünftigerweise erwarten zu benötigen? Wie gut passt es zu Ihren Anforderungen? Wird es eine Menge Code geben, den Sie importieren, möglicherweise Besucher zum Herunterladen auffordern, aber nie verwenden?

Erstellen Sie eine dokumentierte Musterbibliothek oder einen Styleguide

Ich bin ein großer Fan der Arbeit mit Musterbibliotheken und Sie können meinen Beitrag hier im Smashing Magazine über unsere Verwendung von Fractal lesen. Eine Musterbibliothek oder ein Styleguide ermöglicht die Erstellung von Dokumentationen mit all Ihren Komponenten. Ich beginne alle meine Projekte mit der Arbeit am CSS in der Musterbibliothek.

Sie müssen immer noch die Dokumentation schreiben, aber als jemand, der Dokumentation schreibt, weiß ich, dass es oft am schwierigsten ist, zu wissen, wo man anfangen soll und wie man die Dokumentation strukturiert. Eine Musterbibliothek hilft dabei, indem sie die Dokumentation zusammen mit dem CSS für die Komponente selbst aufbewahrt. Dieser Ansatz kann auch dazu beitragen, dass die Dokumente nicht mehr aktuell sind, da sie eng mit der Komponente verknüpft sind, auf die sie sich beziehen.

Entwickeln Sie Ihre eigenen CSS-Code-Richtlinien

Konsistenz im gesamten Team ist unglaublich nützlich, und ohne einen Rahmen gibt es möglicherweise nichts, was dies vorschreibt. Insbesondere bei neueren Layoutmethoden gibt es oft mehrere Möglichkeiten, wie ein Muster aufgebaut werden könnte. Wenn jeder ein anderes auswählt, schleichen sich wahrscheinlich Inkonsistenzen ein.

Bessere Orte, um um Hilfe zu bitten

Abgesehen davon, dass Leute in Richtung Stack Overflow geschickt werden, scheint es, dass es nur sehr wenige Stellen gibt, an denen man um Hilfe zu CSS bitten kann. Insbesondere scheint es wenige Orte zu geben, die für Anfänger zugänglich sind. Wenn wir Menschen von Tools von Drittanbietern abbringen wollen, müssen wir diesen Bedarf an freundlicher, hilfreicher Unterstützung decken, die von den Communities rund um diese Tools kommt.

Innerhalb eines Unternehmens ist es möglich, dass erfahrenere Entwickler zum CSS-Support für neuere Teammitglieder werden. Wenn Sie von einem Framework zu Ihrer eigenen Lösung wechseln, sollten Sie überlegen, welche Schulungen erforderlich sein könnten, um die Lücke zu schließen, insbesondere wenn die Benutzer es gewohnt sind, die Hilfe rund um das Tool eines Drittanbieters zu nutzen, wenn sie in der Vergangenheit Hilfe benötigten .

Styleguides oder Ausgangspunkte für Nicht-Designer

Mit Fragen wie „Welche Schriftarten soll ich verwenden?“, „Wie groß sollten die Überschriften im Verhältnis zum Fließtext sein?“, „Ist es ok, einen Schlagschatten zu verwenden?“ verkrampfe ich mich. Ich kann das CSS leicht schreiben – wenn ich weiß, was ich versuche! Was ich wirklich brauche, sind ein paar Regeln für ein nicht schreckliches Design, eine Art typografischer Ausgangspunkt oder eine Reihe grundlegender Richtlinien, die in vielen Fällen die Verwendung der Standardeinstellungen eines Frameworks ersetzen würden.

Menschen über den Stand der Interoperabilität moderner Browser aufklären

Ich habe festgestellt, dass Leute, die sich seit einigen Jahren mit Framework-basierter Entwicklung beschäftigen, oft eine Ansicht über die Browser-Interoperabilität haben, die mehrere Jahre veraltet ist. Wir waren noch nie in einer besseren Situation in Bezug auf CSS, das browserübergreifend funktioniert. Es kann sein, dass einige Browser kein einziges neues glänzendes Stück CSS unterstützen, aber im Allgemeinen wird CSS (wenn es unterstützt wird) nicht voller seltsamer Fehler sein. Wenn Sie beispielsweise CSS Grid in einem Browser verwenden, funktioniert Ihr CSS in fast allen Fällen auf genau die gleiche Weise in einem anderen.

Wenn Sie versuchen, gegenüber Teammitgliedern, die glauben, dass das Framework sie vor Browserfehlern schützt, Argumente dafür zu machen, kein Framework zu verwenden, kann dieser Punkt hilfreich sein. Sind die Probleme mit der Browserkompatibilität echt oder beruhen sie auf Bedenken der Vergangenheit?

Werden wir eine neue Generation von Frameworks sehen?

Etwas, das mich interessiert, ist, ob unsere neuen Layout-Methoden dazu beitragen werden, eine neue Art von Tools und Frameworks einzuführen. Werden wir Tools sehen, die sich neue Layoutmethoden zunutze machen, mehr Kreativität ermöglichen, aber Teams und Einzelpersonen dennoch einige der unbestreitbaren Vorteile bieten, die sich aus den Antworten auf meinen Tweet ergeben haben.

Vielleicht könnte ein Rahmen neuen Stils viel leichter sein, indem er sich auf neue Layoutmethoden anstelle eines eingebauten Rastersystems verlässt und zu einer Sammlung nützlicher Komponenten wird. Es kann dann möglicherweise einige der Leistungsprobleme beseitigen, die sehr generischem Code innewohnen.

Ein Bereich, in dem ein Framework hilfreich sein könnte, wäre die Erstellung solider Fallbacks für Browser, die neuere Layoutmethoden nicht unterstützen, oder indem eine wirklich solide Zugänglichkeit in die Komponenten integriert wird. Dies könnte dazu beitragen, eine Anleitung zu einer Arbeitsweise zu geben, die Interoperabilität und Zugänglichkeit berücksichtigt, selbst für diejenigen, die diese Dinge nicht im Vordergrund haben.

Ich glaube nicht, dass dies durch einfaches Umschalten des Bootstrap-Grids für das CSS-Grid-Layout erreicht werden kann. Stattdessen sollten sich Autoren, die neue Frameworks entwickeln, vielleicht einige der hier skizzierten Gründe ansehen und versuchen, sie auf neue Weise zu lösen, indem sie die neue Funktionalität verwenden, die wir in CSS dafür haben.

Sollten Sie ein Framework verwenden?

Diese Frage müssen Sie und Ihr Team selbst beantworten. Und trotz allem, was die Leute versuchen, Sie glauben zu machen, gibt es keine universelle richtige oder falsche Antwort. Es gibt nur das Richtige oder Falsche für Ihr Projekt. Ich hoffe, dass dieser Artikel und die vielen Antworten auf meine ursprüngliche Frage Ihnen einige Dinge zum Diskutieren geben, während Sie über diese Frage nachdenken.

Denken Sie daran, dass sich die Antwort im Laufe der Zeit ändern wird. Es könnte ein nützliches Gedankenexperiment sein, nicht nur zu überlegen, was Sie jetzt brauchen, um die Entwicklung der Website zu Beginn durchzuführen, sondern auch die Lebensdauer der Website zu berücksichtigen. Rechnen Sie damit, dass es das in fünf Jahren noch gibt? Wird Ihre Entscheidung dann positiv oder negativ sein?

Dokumentieren Sie Ihre Entscheidungen, scheuen Sie sich nicht, sie zu überdenken, und stellen Sie sicher, dass Sie und Ihr Team Ihre Fähigkeiten außerhalb des von Ihnen gewählten Rahmens beibehalten. Auf diese Weise sind Sie in einer guten Position, um in Zukunft voranzukommen und die besten Entscheidungen für die nächsten Phasen Ihres Projekts zu treffen.

Ich würde mich freuen, wenn das in diesem Tweet begonnene Gespräch fortgesetzt würde. Teilen Sie uns Ihre Geschichten in den Kommentaren mit – sie können anderen Leuten helfen, herauszufinden, was gerade das Beste für ihre Projekte ist.