Ich hörte einmal einen Front-End-Entwicklerwitz: "Die NASA hat Roboter auf dem Mars gelandet, und hier kämpfen wir immer noch darum, unsere Divs in der Mitte auszurichten!" Und es macht mich schlecht, dass dieser Witz viel Wahrheit enthält. In CSS ist es unglaublich schwierig, etwas zu tun, das so einfach und vernünftig klingt wie das Zentrieren einer Box innerhalb einer Box. Es sei denn, Sie haben es schon einmal erlebt. Und das Code-Snippet irgendwo gespeichert. Und selbst wenn Sie es schaffen, es zu schaffen, lauert immer die Angst, dass es in einem dummen Browser irgendwo schrecklich kaputt gehen könnte! CSS-Verbindungen für den ersten Punkt „notwendiger Web-Übel“ zusammen mit JavaScript. Es ist ein Standard, der sich willkürlich entwickelt hat, von verschiedenen Browserherstellern unterschiedlich interpretiert wurde und jetzt so voller Widersprüche ist, dass sich niemand traut, sich selbst als „CSS-Experte“ zu bezeichnen.

Kein Wunder also, dass CSS-Frameworks im Laufe der Zeit entstanden und den größten Teil der Schmerzen beseitigt haben. Heute können wir uns das Codieren ohne unser bevorzugtes CSS-Framework nicht vorstellen, da die Ausrichtung auf mehrere Bildschirmgrößen zu einer Notwendigkeit geworden ist.

Aber woher wissen Sie, dass Ihr Framework das Beste für den jeweiligen Job ist? Wenn Sie mit der Front-End-Entwicklung noch nicht vertraut sind, welches Framework sollte Ihnen bei der Auswahl helfen?

Dieser Beitrag wirft einen umfassenden Blick auf die Front-End-Entwicklungslandschaft und vergleicht die Spitzenreiter unter den CSS-Frameworks. Wenn Sie es satt haben, CSS-Regeln von Hand zu codieren, können Sie schnell Abhilfe schaffen!

Bootstrap

Eine Initiative von Twitter, Bootstrap wird für die Einführung von Responsive Design in großem Maßstab gewürdigt. Es war der erste Rahmen, der die Philosophie von „Mobile-First“ förderte. Das Entwerfen für kleinere Bildschirmgrößen war kein eigenständiges Projekt mehr. Alles, was Sie tun mussten, war, die relevanten Bootstrap-Klassen einzuschließen, und das Design wurde automatisch an verschiedene Bildschirmgrößen angepasst (na ja, fast).

Responsive Design in Bootstrap (4.0 vs. 3.0)

Bootstrap erzielte ein reaktionsschnelles Design, indem es die Idee eines Rasters einführte. Ein Raster ist eine unsichtbare Aufteilung des Bildschirms in Spalten (zusammen mit der Breite). Wenn Sie beispielsweise drei „Kästchen“ haben, die Sie auf großen Bildschirmen nebeneinander, auf kleineren Bildschirmen jedoch vertikal positionieren möchten, gehen Sie folgendermaßen vor:

 Eine von drei Spalten Eine von drei Spalten Eine von drei Spalten

Die derzeit beliebte Version von Bootstrap ist 4, was eine umfassende Überarbeitung der 3.3-Serie darstellt. Die obige Syntax ist, wie Sie in Bootstrap 4 codieren würden, was einen großen Teil seiner Eleganz der rohen Kraft von verdankt Flexbox und andere moderne Layoutfunktionen, die von Browsern direkt unterstützt werden. In den unteren Versionen von Bootstrap wurde das Raster als insgesamt 12 Spalten definiert, was zu Code wie z


Damit ein Div ein Drittel der Bildschirmbreite bei großen Geräten und die Hälfte der Breite bei mittelgroßen Geräten einnimmt. Die Syntax ist jetzt viel angenehmer, erfordert jedoch Vertrautheit mit Flexbox.

Bootstrap-Profis

An Bootstrap gibt es viel zu mögen, besonders für Full-Stack-Entwickler:

  • Rapid-Prototyping: Mit Bootstrap müssen Sie sich kaum Gedanken über knifflige CSS-Positionierung und Browser-Inkompatibilitäten machen. Alles, was Sie tun müssen, um den HTML-Code zu schreiben und dann die entsprechenden CSS-Klassen anzuwenden, wird die Reaktionsfähigkeit lebendig.
  • Großes Ökosystem: Bis heute verfügt Bootstrap über das größte Ökosystem unter den Front-End-Frameworks. Die Anzahl der mit Bootstrap erstellten Website-Layouts, -Themen, Admin-Panels, UI-Komponenten usw. ist umwerfend und wird immer besser. Für Berater und Produktunternehmen bedeutet dies, dass vorgefertigte Artikel und Community-Support immer ausreichend sind.
  • Unterstützt von Twitter: Ein aufkommender Trend bei Open Source ist der Anstieg von Projekten, die von einer kommerziellen Einheit gesponsert werden. Meistens bauen diese Unternehmen profitable Geschäfte rund um ihr Angebot auf. Kotlin (JetBrains), WordPress (Automattic, Inc.), Angular (Google), React (Facebook) usw. sind einige Beispiele. Wenn ein Projekt von einer etablierten Einheit unterstützt wird und keine Einzelausstellung ist, gibt es der Community (insbesondere den Unternehmenskunden) das Vertrauen, dass das Projekt eine klare Roadmap und eine langfristige Zukunft haben wird.
  • Eine große Sammlung von Komponenten: Bootstrap bietet sofort fast alle UI-Komponenten, die Sie wahrscheinlich jemals benötigen werden. Navigation, Formulare, Karten, Modalitäten, Schaltflächen, Abzeichen, Fortschrittsbalken, Warnungen. . . Sie nennen es und Bootstrap hat es. Für viele Unternehmen bedeutet dies praktisch, dass kein dediziertes Front-End-Team erforderlich ist.
  • WENIGER und SASS Unterstützung: Unter den äußerst beliebten CSS-Frameworks ist Bootstrap das einzige, das sowohl LESS als auch SASS unterstützt. Ja, ich weiß, Sie verwenden nicht WENIGER (wie es kein Entwickler mit Selbstachtung tun sollte, oder?), Aber hey, es gibt massive Projekte, die auf WENIGER angewiesen sind. Natürlich können Sie keine auswählen und Ihre einfachen CSS-Dateien ausschreiben.

Bootstrap-Nachteile

Nichts ist ohne Preis, oder? Nun, Bootstrap ist keine Ausnahme. Im Laufe der Zeit wurde Bootstrap von Designern und UI-Experten schwer beschossen. Hier ist der Grund:

  • UX-Monotonie: Die Tatsache, dass Bootstrap über eine so große Sammlung integrierter Funktionen verfügt, führt zu Websites, die allzu vertraut und ehrlich gesagt langweilig aussehen. Sie müssen nur zum gehen offizielle Beispiele um zu sehen, wie nervig die Standardeinstellungen sind. Suchen Sie einfach nach "Alle Bootstrap-Websites sehen gleich aus" und Sie werden wissen, was ich meine. 🙂
  • Styling-Probleme: Bootstrap ist ein Framework mit einer Meinung. Mit anderen Worten, es enthält Ideen zu Layouts, und Sie arbeiten besonders hart, wenn Sie möchten, dass es anders aussieht / sich anders verhält. Berücksichtigen Sie die Standard-CSS-Haltepunkte für Bildschirmbreiten: Ein mittelgroßer Bildschirm für Bootstrap beginnt bei einer Gerätebreite von 768 Pixel. Und was ist, wenn Sie beispielsweise das Limit von 600px anstreben möchten? Nun, viel Glück damit! Dies ist bei fast allen anderen Komponenten im Bootstrap der Fall: Zeilen und Container haben ihre Standardauffüllung, Schaltflächen haben Farben und Ränder, die ohne großen Aufwand nur sehr schwer zu überschreiben sind, und so weiter.

Wollen Master-CSS? Schau dir das an Udemy Online-Kurs.

Foundation

Wenn Technologien Religionen wären, würden sich die Leute von Foundation und Bootstrap gegenseitig um das Blut bemühen. Keine Diskussion über moderne CSS-Frameworks ist vollständig, ohne Foundation zu erwähnen.

Gehe zur Stiftung Website und Sie können nicht anders, als die Zeile zu bemerken: "Das fortschrittlichste reaktionsschnelle Front-End-Framework der Welt." Auf den ersten Blick scheint es ein großer Anspruch zu sein, eine Marketingkampagne durchzuführen.

Anhänger des Foundation-Frameworks wissen jedoch, dass dies zumindest eine gewisse Wahrheit ist. Foundation wurde entwickelt, um auf natürliche Weise zum Rails-Framework zu passen, und einige der „zenartigen“ Leitprinzipien von Rails sind bei der Arbeit zu sehen.

Wenn Sie beispielsweise eine Zeile mit zwei Elementen auf kleinen Bildschirmen, drei auf mittleren und vier auf großen Bildschirmen möchten, sieht der entsprechende Code in Foundation folgendermaßen aus:

 
  
  
  
  
  
  

Im Vergleich zu früheren Bootstrap-Versionen finde ich dies sehr intuitiv und leicht zu merken. Keine zwölf Spaltengitter mehr und herausfinden, was 4/12 sein soll!

Während Foundation viel weniger beliebt ist als Bootstrap, ist es für viele erfahrene Front-End-Entwickler ein Geschäftsgeheimnis.

Vorteile des Foundation Frameworks

Foundation weist einige ungewöhnliche Merkmale aller CSS-Frameworks auf, die wir in diesem Artikel berücksichtigen werden:

  • Volles Werkzeug: Es ist technisch falsch zu sagen, dass Foundation ein CSS-Framework ist. Ich meine, es ist, aber es wurde als große und modulare Sammlung von gebaut Werkzeuge das zielt darauf ab, fast alle Arten von Front-End-Problemen zu lösen. Es gibt separate Framework-Angebote für Websites und E-Mails, die stark für die jeweiligen Domains optimiert sind. Foundation verfügt außerdem über eine Befehlszeilenschnittstelle (Command Line Interface, CLI), die für Entwickler, die mit Webpack oder anderen Modulbündlern arbeiten, wie Musik klingt.
  • Extreme Flexibilität: Im Gegensatz zu Bootstrap wurde Foundation entwickelt, um dem Front-End-Entwickler die volle Kontrolle über seine Benutzeroberflächen zu geben. Infolgedessen wird sich Foundation für den Neuankömmling langweilig und enorm komplex fühlen. Der Grund dafür ist jedoch, dass Foundation Ihnen keine Stilsprache aufzwingt, sondern genau das sein möchte, was es ist: ein ausgezeichnetes CSS-Framework.
  • Mehr als nur UI-Komponenten: Foundation verfügt zwar über die übliche Sammlung von UI-Elementen, geht jedoch weit über die Pflichterfüllung hinaus. Die Entwickler haben ein fortschrittliches Responsive Image-System, eine Preistabellenkomponente (ja, die zur Anzeige verschiedener Preispläne verwendet), Formularvalidierung, Unterstützung von rechts nach links, Responsive Embeds und mehr integriert. Ich möchte noch einmal betonen, dass dies ein Overkill für die meisten einfachen Websites ist, aber für große Websites ist es ein Segen, den erfahrene Entwickler erkennen werden.
  • Schulung und Beratung: Während Bootstrap von Twitter erstellt wird, ist es ein Nebenprojekt und ein sehr kleiner Teil des Gesamtbildes. Das Unternehmen hinter der Stiftung (ZURB) ist jedoch bestrebt, diese zu nutzen, weiterzuentwickeln und zu fördern. Für Großkunden werden Schulungen und professionelle Beratung angeboten. Dies ist ideal für Unternehmen, die auf massive Projekte abzielen und bereit sind, dafür zu zahlen.

Nachteile des Foundation Framework

Die Stärken eines Frameworks werden aus entgegengesetzter Sicht zu seinen Schwächen. Hier ist der Grund, warum die Stiftung möglicherweise nicht die beste Wahl für Ihr Projekt ist:

  • Kleine (er) Gemeinschaft: Die Foundation-Community ist viel kleiner als die von Bootstrap. Wenn Sie etwas Exotisches ausprobieren und nicht weiterkommen, sind die Chancen geringer, relevante Hilfe zu finden. Ich würde dies jedoch für alle praktischen Zwecke hinzufügen; Es gibt genug von einer Gemeinschaft da draußen. Es ist nur so, dass es mehrere Größenordnungen kleiner ist als das von Bootstrap, sodass Sie möglicherweise nicht sofort Lösungen finden.
  • Komplexität: Wenn Sie an Bootstrap oder etwas Einfaches oder Schlimmeres an Vanille-CSS gewöhnt sind, wird Foundation sich wie eine unendliche Explosion der Komplexität anfühlen. Ebenen in Ebenen, Komponenten mit Komponenten, endlose Anpassungsmöglichkeiten. . . Schon bald werden Sie anfangen, die Nützlichkeit des Lebens selbst in Frage zu stellen! Andererseits hat die Stiftung ein ganz anderes Ziel und kann nicht dafür verantwortlich gemacht werden.
  • Zu viele Optionen: Manchmal möchte man einfach nur Scheiße machen und sich später um Perfektion sorgen. In solchen Zeiten ist es frustrierend, zu viele Optionen mit geringfügigen Abweichungen zu erhalten. Denken Sie zum Beispiel daran, ein Subway-Sandwich bestellen zu müssen, wenn Sie so hungrig sind, dass Sie Schlamm essen könnten. Natürlich ist Foundation nicht für solche Zeiten.
  • Talentverfügbarkeit: Da Foundation (viel) weniger beliebt ist als Bootstrap, ist das verfügbare Talent viel geringer. In der Regel kennt jeder neue Mitarbeiter Bootstrap mit ziemlicher Wahrscheinlichkeit, hat jedoch keine Ahnung von Foundation. Lernen braucht Zeit und es ist ein Luxus, den nicht alle Teams haben können.

Bulma

Bulma ist ein relativ neuer Teilnehmer auf dem Schlachtfeld der CSS-Frameworks und hat sich in kurzer Zeit einen Namen gemacht. Es ist beitractiveDie Hauptsache liegt in einem strengen, reinen CSS-Ansatz (es gibt keine JavaScript-Komponenten) und eleganten Standardeinstellungen, womit viele Entwickler mit einem guten Auge für Design ein Problem haben, wenn sie mit Bootstrap arbeiten.

Ein Großteil der Dynamik von Bulma beruht auf hohen Akzeptanzraten bei der Laravel-Community (ein PHP-Webframework, falls Sie es nicht wussten), was Vue.js sicher zu einem Höhepunkt der Popularität verholfen hat unter JavaScript-Frameworks.

Warum sollten Sie sich für das Bulma CSS Framework entscheiden?

Es gibt viele Gründe, Bulma zu mögen und für Ihr nächstes Projekt zu verwenden:

  • Sehr beliebt: Okay, es ist nicht beliebter als Bootstrap, aber es ist beliebter als Foundation. Zum Zeitpunkt des Schreibens hat Bulma mehr als 30 Sterne auf Github, rund 3 mehr als Stiftungen. Natürlich ist eine Reihe von Github-Sternen keine Metrik des Verdienstes, aber es heißt, dass die Community Bulma gutheißt.
  • Sehr gut lesbare Klassen: Bulma hat für mich die am besten lesbaren CSS-Klassen aller Frameworks, die ich ausprobiert habe. Es gibt auch ein lächerlich leistungsfähiges und einfaches System zum Erstellen von Gittern im Metro-Stil, Kacheln genannt (sehen Sie sich einfach den Code in der zweiten Hälfte des Screenshots an und sagen Sie mir, dass Sie nicht beeindruckt sind!).

  • Flache Lernkurve: Bulma ist sehr modular aufgebaut und wurde entwickelt, um die praktischen, alltäglichen Probleme zu lösen, auf die kleinere Teams und einzelne Entwickler stoßen. Sie werden feststellen, dass Bulma sehr einfach zu erlernen ist, obwohl ich denke, dass ein anständiger Hintergrund in CSS immer gut ist, um eine Vorstellung davon zu haben, was unter der Haube vor sich gehen könnte. Dies hilft Ihnen, wenn Sie das Standardverhalten überschreiben möchten.
  • elegant: Schauen Sie sich unten den Standard-Heldenabschnitt für Bulma an. Genug gesagt!

Bulma hat eine kleine, aber äußerst leidenschaftliche Community. Wenn Sie also den ganzen Flaum beseitigen und dennoch in Rekordzeit elegant aussehende Benutzeroberflächen erstellen möchten, ist Bulma der richtige Weg. Für Bootstrap-Entwickler hat Bulma einen separaten Bereich, in dem sie überzeugen und bei der Migration helfen können.

UIkit

Das, woran man denkt UIkit ist Minimalismus. Minimalismus nicht in Features (tatsächlich bietet er vielleicht die meisten Features aller Frameworks), sondern im Design. Wenn super saubere, elegante, nicht Leerzeichen-schüchterne Designs Ihr Ding sind, hat UIkit Sie abgedeckt.

Schauen Sie sich zum Beispiel die Fortschrittsbalken-Komponente an:

Oder die Bildmarkierungskomponente (eine JS-gesteuerte interaktive Markierung für Bilder):

Oder sogar das bescheidene HTML-Formular:

Wenn das nicht aus voller Kehle nach Eleganz schreit, weiß ich nicht, was es tut. Besuchen Sie einfach die UIkit-Website und sehen Sie sich all die unglaublichen Komponenten an, die sie zu bieten hat. Es sei denn, Ihre Projektmanager oder der Kunde Ihnen eine bestimmte Stilsprache aufzwingt, denke ich, dass Uikit die Krone für UI-Design übernimmt und dem Material Design von Google mehrere Meilen voraus ist.

Aber gibt es einen Haken, fragen Sie sich. Ja da ist. Wie Bootstrap arbeitet UIkit mit seinem JavaScript und während Sie jQuery für die DOM-Manipulation verwenden können, verwenden Sie ein virtuelles DOM-Framework wie Reagieren ist unmöglich.

Außerdem ist Uikit ein in sich geschlossenes System, und Sie können es nicht ohne großen Aufwand ändern oder erweitern.

Semantic UI

Ein weiterer Anwärter im Rennen ist Semantische Benutzeroberfläche, die versucht, sich mit vielen Themen und Anpassungen zu profilieren. Es gibt mehr als 3000 Themenvariablen, was zu einer enormen Breite führt. Zumindest sagen die Dokumente.

Bootstrap 4 deckt all dies ab und ist auch vollständig anpassbar. Ein Vorteil der semantischen Benutzeroberfläche ist jedoch, dass sie standardmäßig zu gut aussehenden Layouts führt. Trotzdem sieht es nicht besonders gut aus, weshalb ich es später auf meine Liste setze.

Es hat auch eine der steilsten Lernkurven und die Codierungskonventionen sind viel strenger. Versuch es; Ich würde sagen und sehen, ob es wie etwas aussieht, das Sie vielleicht bevorzugen.

Susy

Susy ist zu diesem Zeitpunkt ein wenig bekannter Rahmen, aber es ist eine faszinierende und erfrischende Idee. Susy ist ein weiteres Framework mit reinem Layout und verzichtet auf alle vordefinierten Ideen von Float, Grid, Flexbox, Tabellen oder anderen Dingen komponieren die Art von Layout, die Sie wollen. "Komponieren" ist hier das Schlüsselwort, da Susy für die Erstellung hochmodularer, atemberaubender Layouts mit äußerst komplexen, ungewöhnlichen und präzisen Anforderungen gedacht ist.

In den Händen des erfahrenen Entwicklers ist Susy wie ein Flammenwerfer, der alles andere wegbläst. Kleinere Sterbliche werden es natürlich schaffen, sich die Hände zu verbrennen.

Probieren Sie diese Standardeinstellung (SASS) aus, um sich ein Bild von der Leistungsfähigkeit von Susy zu machen:

 // 4 symmetrische, flüssige Säulen // Rinnen sind 1/4 so groß wie eine Säule // Elemente überspannen 1 weniger Rinne als Säulen // Container überspannen 1 weniger Rinne $ susy: ('Säulen': susy-repeat (4 ), 'Dachrinnen': 0.25, 'Ausbreitung': 'eng', 'Container-Ausbreitung': 'eng',);

Ich denke, dass der Code ziemlich selbsterklärend ist, obwohl er nicht für diejenigen gedacht ist, die es eilig haben. 🙂 Susy ist absolut sinnvoll, wenn Sie die Aufblähung, die moderne Frameworks Ihnen auferlegen, satt haben und Layoutanforderungen haben, von denen Sie wissen, dass kein gewöhnliches Framework sie erfüllen kann.

Materialize

Wenn Sie in Googles Material Design verliebt sind, ist Materialise ein Rahmen du wirst es genießen. Das Beste ist, dass es nur eine Handvoll Komponenten und Klassen zu lernen gibt und sich darauf konzentriert, Sie so schnell wie möglich produktiv zu machen. Es gibt nur wenige Anpassungsoptionen, und Materialise folgt dem beliebten 12-Spalten-Rasterformat, das von Bootstrap festgelegt wurde.

Wenn Sie mich jedoch fragen, a Material Design wird so üblich und ist so. . . Standardmäßig flach, dass wir uns ziemlich bald darüber beschweren werden, wie wir es mit dem Problem tun, dass alle Websites von Bootstrap gleich aussehen. Trotzdem ist es zunächst ein schöner Rahmen.

Pure

Ist Yahoo tot?

Nein, diese Frage ist keine Ablenkung, sondern unterstreicht eine wichtige Beobachtung: Yahoo hat die Reiner Rahmen und veröffentlichte es unter der BSD-Lizenz.

Ein kurzer Blick beeindruckt mich und ich frage mich, warum dieses Angebot nicht mehr Menschen bekannt ist. Was Pure macht, ist, dass es ein auch CSS-Framework. 🙂 Tatsächlich haben die Entwickler die Extrameile gegangen und es in verschiedene CSS-Module aufgeteilt, die Sie nach Bedarf importieren können. Wenn Sie also nur das Rastersystem benötigen, müssen Sie nicht das gesamte CSS importieren und zur Ladezeit der Site hinzufügen.

Das Pure-Raster gibt es in verschiedenen Varianten: 5-Punkt-, 2-Punkt-, 24-Punkt-Raster usw. Wenn Sie also Spalten erstellen, haben Sie viel mehr Flexibilität. Pure ist standardmäßig nicht das am besten aussehende CSS-Framework, aber ich kann sehen, wie es denjenigen einen Mehrwert bietet, die ein kleines CSS-Problem in ihrer Benutzeroberfläche lösen und sich an den „hilfreichen“ Standardeinstellungen anderer Frameworks festhalten möchten.

Skeleton

Wie Sie im Screenshot sehen können, Skeleton ist so minimal, dass es sich nicht einmal als CSS-Framework, Bibliothek oder gar Modul bezeichnet. Es ist Kochplatteund enthält nur 400 Zeilen Quellcode! Unglaublich? Ich denke schon, aber um die Dinge ins rechte Licht zu rücken, wurde Skeleton für kleine oder kleine Projekte entwickelt, die nur Layouts und Positionierungen benötigen.

Einen Blick wert; Wer weiß, Skeleton könnte das sein, wonach Sie die ganze Zeit gesucht haben!

Milligram

Milligramm, ein CSS-Framework für Geschwindigkeit und Produktivität. Die Entwickler haben es unter 2 KB groß gehalten, was nach heutigen Maßstäben viel bedeutet.

Ein Milligramm ist eine lustige kleine Version von CSS-Frameworks, mit denen Sie gerne arbeiten werden. Das Erweitern ist einfach und mit ein paar Zeilen benutzerdefiniertem CSS können Sie das Erscheinungsbild nach Ihren Wünschen ändern.

Tailwind CSS

Ich erinnere mich an die frühen Tage, als Tailwind CSS veröffentlicht wurde. Es machte kaum einen leisen Knall, und das Ökosystem schenkte ihm keine Aufmerksamkeit; und das zu Recht, da Tailwind weder von einem Technologieriesen unterstützt wurde noch über ein massives Marketingbudget verfügte. Außerdem mit Rückenwind Sie nicht Holen Sie sich eine Bootstrap-ähnliche Erfahrung, etwas, das zur Norm geworden war (oder vielleicht immer noch ist).

In der Tat Tailwind befürwortete einen Schreibstil und die Verwendung von CSS, der viele vor Ekel schreien ließ. Ich meine, sehen Sie sich die Verwendung von CSS-Klassen im folgenden Code an (entnommen aus der Tailwind-Website):

<figure class="md:flex bg-gray-100 rounded-xl p-8 md:p-0">
  <img class="w-32 h-32 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
  <div class="pt-6 md:p-8 text-center md:text-left space-y-4">
    <blockquote>
      <p class="text-lg font-semibold">
        “Tailwind CSS is the only framework that I've seen scale
        on large teams. It’s easy to customize, adapts to any design,
        and the build size is tiny.”
      </p>
    </blockquote>
    <figcaption class="font-medium">
      <div class="text-cyan-600">
        Sarah Dayan
      </div>
      <div class="text-gray-500">
        Staff Engineer, Algolia
      </div>
    </figcaption>
  </div>
</figure>

Wenn Sie seit mehr als ein paar Jahren Entwickler sind, werden Sie wahrscheinlich Übelkeit verspüren. Damit . . . viele . . . Klassen . . . ! Und obwohl es hier kein Inline-CSS gibt, fühlt es sich so an, wenn man bedenkt, wie explizit (und hässlich?) Die Klassennamen sind.

Also, seit geraumer Zeit, Adam Wathan (der Schöpfer von Tailwind) lief von Säule zu Säule (dh in Podcasts, Konferenzen, Blog-Posts, Tweets), warum er der Meinung war, dass Utility-basiertes CSS semantischem CSS überlegen sei.

Niemand hörte zu.

(Für diejenigen, die mit der Terminologie zu kämpfen haben, ist hier eine kurze Erklärung: Ein Name, der auf dem Dienstprogramm basiert, würde seine CSS-Fähigkeit sofort offenbaren. Beispielsweise würde "vw-100" von den meisten korrekt als "Ansichtsfensterbreite - 100%" gelesen. Auch ohne zusätzliche Informationen. Semantic CSS befürwortet andererseits die Verwendung von Klassennamen, die aus geschäftlicher / kontextbezogener Sicht sinnvoll sind. Beispiele sind: "Überprüfungsliste", "Überprüfungsbild" usw. Das letztere Beispiel stammt wahrscheinlich von einer Aggregator-Site, auf der Kunden Bewertungen veröffentlichen können, aber es ist unmöglich zu wissen, was diese Klassen tatsächlich tun, wenn Sie sich nicht den Quellcode ansehen.)

Wie ich bereits sagte, hat der Rückenwind kaum oder gar keine Auswirkungen. Aber hier und da begannen die Entwickler nacheinander, den Ansatz zu mögen und zu übernehmen. Ich könnte mich irren, aber ich würde sagen, irgendwo im Jahr 2019 explodierte Rückenwind in der Popularität. Es brachte der Webentwicklung einen unkonventionellen Ansatz und die Aufmerksamkeit auf einige raffinierte Tools wie PurgeCSS.

Heute hat Utility-basiertes CSS eine beträchtliche Delle gemacht. Sehen Sie sich diesen Bootstrap 5-Code an und sehen Sie, wie häufig Dienstprogrammklassen geworden sind:

<div class="d-grid gap-3">
  <div class="p-2 bg-light border">Grid item 1</div>
  <div class="p-2 bg-light border">Grid item 2</div>
  <div class="p-2 bg-light border">Grid item 3</div>
</div>

Nachdem wir über das „große Ganze“ von Rückenwind gesprochen haben, wenden wir uns den konkreten Vorteilen zu, die es bietet:

  • Mehr Produktivität: Jetzt können wir über Produktivität den ganzen Tag streiten und niemals irgendwohin gelangen. Entwickler, die Tailwind ausschließlich (insbesondere für große Projekte) eingeführt haben, sagen jedoch, dass sie viel produktiver sind. Sie müssen jedoch im Voraus nachhaltige Anstrengungen unternehmen, da Rückenwind nur dann für Sie funktioniert, wenn Sie „Best Practices“ aus der Vergangenheit verlernt haben.
  • Kleinere Bündelgröße: Rückenwind ist mehr oder weniger JS, das CSS manipuliert, so dass einige elegante Dinge möglich sind. Wenn Sie beispielsweise das Projekt erstellen, kann der Compiler alle unnötigen CSS entfernen. Dies ist ein ziemlicher Kontrast zu einem typischen Webprojekt, das das Bootstrap-CSS-Modul verwendet. In diesem Fall wird das gesamte Bootstrap-CSS in die letzte Sache gepackt.
  • Konfigurierbar und anpassbar: Rückenwind ist nicht nur extrem modular aufgebaut, sondern unterstreicht auch die einfache Konfiguration und Anpassung. Es gibt nichts Schöneres als „in 2 Minuten mit Rückenwind beginnen“, denn Sie müssen lernen, was, wo, warum und noch viel mehr. Ein weiteres Beispiel: Wenn Sie Ihr Design-System nicht bereit haben und die Standardeinstellungen nicht mögen, werden Sie frustriert sein. Sie haben Um die anfängliche Lern- / Anpassungskurve zu durchlaufen, bevor Sie „Wow!“ sagen können.
  • Keine Benennung oder Kontextumschaltung: Eine der größten Aufgaben, die Entwickler haben, ist das Benennen von Dingen. Sollte das Endergebnis aufgerufen werden totalAmountForUnits or expensesAcrossUnits, zum Beispiel. Das Problem ist in CSS noch schwerwiegender, da ein Projekt Hunderte (oder sogar Tausende) Klassen enthalten kann. Ein weiteres Problem ist das Umschalten des Kontexts: Wechseln Sie ständig zwischen HTML und CSS, um zu sehen, wie sich das CSS ändert. Mit Tailwind sind die Namensentscheidungen bereits für Sie getroffen, und da Sie immer nur Klassen zu HTML hinzufügen / daraus entfernen, gibt es keine Kontextumschaltung.
  • Wiederverwendung von Code: Wenn Sie feststellen, dass Sie einige nützliche Klassen wiederverwenden, indem Sie sie projektübergreifend kopieren, bietet Tailwind eine Funktion namens Components, um dieses Problem elegant zu lösen. Lesen Sie mehr über diese Funktion .

Für viele war Rückenwind ein Hauch frischer Luft, den sie dringend brauchten. Wenn Sie Ihre aktuelle CSS-Bibliothek satt haben und etwas Radikales und Neues ausprobieren möchten, ist Rückenwind genau das, wonach Sie suchen!

Tacit

Tacit ist jemandes Nebenprojekt, auf das ich gestoßen bin, als ich nach interessanten Dingen für diesen Artikel gesucht habe. Ja, einfach ein Nebenprojekt; nichts weiter als die Arbeit einer Person nach ihrem Geschmack.

Warum betone ich das so sehr?

Weil dies im Allgemeinen bedeutet, dass das Risiko, verlassen zu werden, sehr hoch ist. Aber dann kann ich mir auch ein paar positive Dinge vorstellen: 1) Die Projekt ist auf GitHub und wenn Sie ein Entwickler sind und Tacit unterstützen / erweitern möchten, wissen Sie, was zu tun ist. 😉 2) CSS ist in Bezug auf Änderung oder Entwicklung nicht wie JavaScript. Welches Styling Sie heute verwenden, wird von Browsern sehr lange unterstützt.

Also, was genau ist diese stillschweigende Sache?

Wie der Screenshot sagt, Stillschweigend ist für diejenigen, die CSS nicht kennen oder einen schlechten Geschmack im Design haben. Die Idee ist neu: Fügen Sie den CSS-Link zu Ihrem Projekt hinzu, und Sie erhalten sofort eine gut aussehende Website! Aber stellen Sie sicher, dass Sie Ihr Versprechen halten: Fügen Sie niemals anderes CSS hinzu und mischen Sie keine Inhalte aus anderen Frameworks, da dies die Dinge schwer beschädigen wird.

Und sieht eine Tacit-Website gut aus?

Wenn Sie mein Wort dafür nehmen möchten, würde ich sagen, dass der gewählte Designstil „sehr gut“ ist. Eigentlich finde ich es noch angenehmer als die semantische Benutzeroberfläche, eines der beliebtesten CSS-Frameworks / Bibliotheken da draußen! Ohne in einen Flammenkrieg zu geraten und Screenshot-Vergleiche nebeneinander anzustellen, werde ich das Thema fallen lassen, indem ich sage, dass Design subjektiv ist. Aber Sie können vergleichen und selbst entscheiden. 🤪

Lassen Sie mich auf jeden Fall ein paar Screenshots von Tacits Look-and-Feel hinzufügen.

Erstens sehen Formelemente so aus:

Und so sehen Tabellen in ihrer grundlegendsten Form aus:

Zum Abschluss wiederhole ich das Offensichtliche: Wenn Sie der Meinung sind, dass diese Art von Farben, Schriftarten, Stilen usw. als Standardeinstellungen großartig sind, Stillschweigend wird sich als willkommene Erleichterung erweisen.

Spectre

Modern, flexibel, leicht - wenn Sie etwas mit diesen Eigenschaften suchen, ist Spectre einen Blick wert.

Lassen Sie mich meine Wahl der Adjektive für erklären Spektrum:

  • Modern: Das Layoutsystem von Spectre basiert auf Flexbox, was zu dem Besten gehört, was uns modernes CSS gegeben hat. Gleichzeitig finden sich viele Möglichkeiten und Werkzeuge in modernem CSS workflows oder andere Frameworks sind ebenfalls enthalten.
  • Flexibel: Sie können das modularste und fortschrittlichste CSS-Framework schreiben, aber es nützt wenig, wenn dies nicht der Fall ist leicht anpassbar. Mir gefällt, wie die Anpassung ganz oben in ihren Dokumenten erwähnt wird. Folgen Sie dem Kaninchenbau, und Sie werden umfangreiche finden Erläuterungen.
  • Leicht: Wir befinden uns in einer Zeit, in der die Bedenken hinsichtlich der Webleistung im Aufwind sind. Jedes übertragene Kilobyte wird geprüft und kritisiert. Als solches packt Spectre alles in ein süßes 10-KB-Paket, das nicht für uns alle „zu viel“ sein sollte. 😝

Leicht zu sein bedeutet nicht, dass Spectre die Funktionalität opfert. Es gibt alles, was Sie als Bootstrap-Fan gewohnt sind: Komponenten (Akkordeons, Brotkrumen, Karten und mehr), Elemente (Formulare, Tabellen, Schaltflächen usw.), Layout (Gitter, Heldenbereich, Navigationsleiste usw.), Dienstprogramme (Lader, Spinner usw.) und mehr.

Was denke ich über Spectre? Ich bin mehr oder weniger verkauft, aber es gibt ein paar Dinge, die ich erwähnen möchte. Erstens mag ich die standardmäßige primäre blaue Farbe nicht so sehr, daher ist es das erste, was ich in meinen Projekten tun würde, sie zu ändern. 😬 Zweitens denke ich, dass das CSS-Raster im Jahr 2020 das beste Werkzeug für Layouts ist. Ich finde Flexbox etwas seltsam, um alle Layout-Dinge zu erledigen, also wünschte ich mir, Spectre hätte Grid anstelle von Flexbox verwendet.

Aber das ist kaum ein Deal-Breaker, wenn ich mich schnell entwickeln und gute Ergebnisse erzielen kann. Also werde ich sagen, mach weiter und probiere Spectre furchtlos aus!

Primer

Grundierung ist nicht ein CSS-Framework oder eine Bibliothek. Es ist nicht einmal eine Sammlung von CSS-Klassen oder eine andere seltsame Wendung in der Terminologie.

Warum steht es dann auf dieser Liste? Zwei Gründe:

  • It hat ein CSS-Framework.
  • Es ist eines der umfassendsten und umwerfendsten Dinge, die Sie jemals sehen werden.

Ja, wie der Screenshot sagt, ist Primer ein Design-System, das von GitHub für den eigenen Gebrauch entwickelt wurde. Schließlich stellten sie fest, dass dieses Ding mächtig und äußerst nützlich für das Frontend und die visuelle Arbeit war. Also machten sie es Open Source.

Ich habe mich bemüht, die richtigen Worte zu finden, um Primer zu beschreiben. Ihr eigenes Design System Team nennt es. . . Ja, ein Design-System, aber ich denke, der Anwendungsbereich ist weitaus breiter als das, was wir unter „Design-System“ verstehen.

Grundierung umfasst viele Dinge, deren Bedeutung möglicherweise nicht sofort offensichtlich ist. Zumindest für Backend- / Full-Stack-Entwickler. Schauen wir uns also an, was diese besonderen Dinge sind, warum diese besonderen sind:

  • Schnittstellenrichtlinien: In einem Ein-Personen-Team ist das Entwerfen und Verwalten von Benutzeroberflächen trivial. Wenn Sie dem Team jedoch drei weitere Personen hinzufügen - und noch dazu qualifizierte, erfolgreiche Mitarbeiter -, können Sie sehen, wie sich alles verschlechtert. Der Grund ist das Fehlen klar definierter und strikt durchgesetzter Richtlinien, sodass jeder weiß, was in jeder Situation zu tun ist. Primer kommt mit einem schönen Satz von Richtlinien dass Sie heben oder an Ihre Bedürfnisse anpassen können.
  • Figma-Komponenten: Obwohl ich Entwickler bin, weiß ich genug über Design, um zu verstehen, dass das Fehlen einer eindeutigen Referenz / Verwendung von Komponenten im Verlauf des Projekts außer Kontrolle geraten kann. Wie soll die Taste aussehen, wenn sie beispielsweise im Dunkelmodus gedrückt wird? Wenn niemand dies dokumentiert hat und Druck besteht, zu liefern, gibt es verschiedene Varianten. Und so haben die Leute bei Primer ihre eigenen zur Verfügung gestellt Figma Dateien, damit wir lernen und besser machen können.
  • CSS-Framework: Endlich das, was verdient hat Grundierung ein Platz auf dieser Liste! 😄 Primer verfügt über ein modulares CSS-Framework im BEM-Stil, das separate Stile für die Produkt- und Marketing-Seiten bereitstellt. Dies ist etwas, was GitHub für ihre Bequemlichkeit getan hat, und Sie können es nicht berühren oder die allgemeine Philosophie so akzeptieren, wie sie ist. Auch wenn es nur das CSS ist, das Sie interessiert, empfehle ich Ihnen, einen Blick darauf zu werfen .
  • Symbole (Oktikonen): Jedes kohärente Designsystem hat seine eigenen Ansichten zu Symbolen. Zum Grundierung, die Antwort ist Octicons. Anscheinend gibt es nicht so viele Symbole. Trotzdem setze ich dies weiter oben auf die Liste, da Symbole Teil der absoluten Grundlagen sind: Wenn alles übereinstimmt, aber einige Symbole nicht übereinstimmen, ist das Ergebnis eine Benutzeroberfläche, die zu einer Bindehautentzündung führt. 😝
  • Komponenten reagieren: Und da React die beliebteste Frontend-Bibliothek ist, haben die GitHub-Leute die CSS-Elemente natürlich als React codiert Komponenten, die jetzt für uns alle verfügbar sind!
  • Präsentationen: Dieser Teil der Grundierung Hier geht es darum, welche Designsprache für die Präsentation vor Publikum verwendet werden soll (wie sie von Leuten bei GitHub intern verwendet wird). Schriftarten, Farben, Ränder, Kontraste - alle Entscheidungen wurden bereits getroffen. Sie können ihre studieren Richtlinien und entwickeln Sie Ihre.

Der größte Vorteil von Primer besteht darin, dass es als Ganzes betrachtet wird. Dies ist möglicherweise nicht für alle möglich, und einige stellen möglicherweise sogar fest, dass ihre Designsprache mit der von GitHub in Konflikt steht. Und dann finden einige Leute einen bestimmten Teil (oder sogar einen Teil des Teils!) Von Primer nützlich und führen ihn aus. Egal, wo Sie in diesem Spektrum stehen, Primer hat Ihnen etwas zu bieten: entweder wiederverwendbare, hochwertige Designsystemkomponenten oder Denkanstöße für Ihre eigenen Prozesse und Richtlinien!

Welches CSS-Framework ist das beste?

Geben Sie zu, Sie haben bereits ähnliche Fragen gestellt und die folgende enttäuschende Antwort erhalten: keine. 😀 Auswahl eines Frameworks (oder a Werkzeug(oder sogar eine Person in Ihrem Leben) hängt von vielen Faktoren ab. Wenn Sie meinen Rat wollen, hier ist es: Schneiden Sie den Lärm aus. Nur weil die Leute verrückt nach etwas Neuem und Glänzendem sind, heißt das nicht, dass Sie es lernen müssen, sonst werden Sie zurückgelassen. Es ist großartig, neue Dinge auszuprobieren, aber auf der Suche nach dem perfekten Werkzeug im Kreis herumzulaufen, ist eine Verschwendung.

Welches dieser Frameworks haben Sie ausprobiert? Oder ist da draußen etwas Erstaunliches, das ich gerade verpasst habe? Lass es mich bitte in den Kommentaren wissen. Liebe, Hass, zufällige Hallo, alle sind willkommen!