Top 5 CSS-Tools für Webentwickler und Designer

CSS hat einen langen Weg zurückgelegt, aber die Tools dafür haben es bisher noch nicht getan.


Wenn Sie der Meinung sind, dass das Schreiben von CSS dem Kampf gegen Monster in einer Teergrube gleicht, sind Sie nicht allein. Während CSS eine der grundlegendsten Technologien für das Web ist, ist es per se keine richtige Programmiersprache oder ein geeignetes Framework. Sobald Ihr Projekt an Bedeutung gewinnt, ist auch das Chaos größer – die Auswahlregeln scheinen allgegenwärtig zu sein, und es ist schwierig zu finden, was wo ist. Wenn Sie Schriftarten, externes CSS, JS und andere Elemente in Ihre Seiten aufnehmen, scheint die endgültige Größe des Bundles außer Kontrolle zu geraten, und Sie fragen sich, wo die Ideale schneller, benutzerfreundlicher Frontends verloren gegangen sind.

Aber so muss es nicht sein. Heute hat sich das Tooling rund um CSS so weit entwickelt, dass der Workflow nicht nur gezähmt, sondern auch angenehm gestaltet werden kann. In diesem Artikel werde ich über fünf solcher CSS-Tools sprechen, die ich in meiner Arbeit als immens wertvoll empfunden habe. Ich habe es bewusst vermieden, einschließlich “Spielzeug” -Tools wie CSS-Generatoren, Menügeneratoren usw., weil sie mehr Probleme verursachen als lösen.

Der CSS-Zug kommt! Lass uns gehen! �� ��

PostCSS

Wenn Sie JavaScript lieben, werden Sie die Idee lieben, dass wir jetzt CSS über JavaScript hinzufügen und steuern können. Und genau das ist die Fähigkeit, die PostCSS bietet.

Es handelt sich jedoch nicht nur um JavaScript-basierten Syntaxzucker über CSS. PostCSS fasst mehrere leistungsstarke Pakete / Funktionen zusammen, was zu einem viel angenehmeren und einfacheren Workflow beim Umgang mit CSS führt. Zum Beispiel:

  • Herstellerpräfixe werden automatisch hinzugefügt, je nachdem, welche Eigenschaft Sie verwenden.
  • Die Fähigkeit zu erkennen, welche CSS-Funktionen im aktuellen Browser verwendet werden können.
  • Verwendung der bevorstehenden, noch nicht veröffentlichten, aber sehr leistungsfähigen Syntaxaktualisierungen für CSS.
  • Ein reaktionsschnelles Raster, das so flexibel wie möglich ist.

Ich glaube, ich werde PostCSS nicht gerecht, wenn ich das Rasterbeispiel nicht einbeziehe. Auf geht’s. So etwas Einfaches:

div {
verlorene Spalte: 1/3
}}

wird in ein vollwertiges CSS-System umgewandelt, wobei fast alle Randfälle erledigt werden:

div {
Breite: berechnet (99,9% * 1/3 –
(30px – 30px * 1/3));
}}
div: n-tes Kind (1n) {
float: left;
Rand rechts: 30px;
klar: keine;
}}
div: letztes Kind {
Rand rechts: 0;
}}
div: n-tes Kind (3n) {
Rand rechts: 0;
schweben rechts;
}}
div: n-tes Kind (3n + 1) {
Lösche beide;
}}

Da es sich um eine JS-gesteuerte Sache handelt, ist PostCSS nicht ganz einfach einzurichten, insbesondere wenn Sie Designer sind und nicht viel mit Modulen, Bundlern und der npm-Welt im Allgemeinen zu tun haben. Das Potenzial für PostCSS in Ihrer Arbeit ist jedoch enorm und sollte nicht übersehen werden.

PurgeCSS

Lieben Sie den modernen Frontend-Framework-basierten Workflow, sind aber frustriert, dass er zu viel Gepäck mit sich bringt? Wenn ja, ist PurgeCSS Ihr Freund, zumindest was CSS betrifft.

Für diejenigen, die vielleicht nicht wissen, was die große Sache ist: Hier ein kurzer Überblick. Wenn Sie einseitige Anwendungen mit Front-End-Frameworks wie React, Angular, Vue usw. erstellen, durchlaufen Sie einen sogenannten “Erstellungsprozess”. Im Wesentlichen codieren Sie Ihr gesamtes CSS, JS, SASS usw. in separaten Dateien (organisieren Sie sie so, wie Sie es am intuitivsten finden). Sobald Sie fertig sind, weisen Sie den Bundler an, das Objekt zu “erstellen”. Dazu lesen Sie den gesamten Quellcode, den Sie geschrieben haben, wenden verschiedene Filter an (Minimierung, Verschleierung / Hässlichkeit usw.) und spucken die Ausgabe in einzelne Dateien aus, normalerweise “app.js” für das gesamte JavaScript “App.css” für das gesamte CSS. Diese Dateien sind zusammen mit einer dünnen “index.html” alles, was Sie benötigen, um das Front-End der Anwendung auszuführen. Der Nachteil ist, dass, da alles in diesen endgültigen Dateien enthalten ist, ihre Größe häufig über das hinausgeht, was für eine schnelle Antwortzeit zulässig ist. Es ist beispielsweise nicht ungewöhnlich, dass eine “app.js” mit mehr als 500 KB angezeigt wird!

PurgeCSS wird als Teil Ihres Build-Workflows hinzugefügt und verhindert, dass nicht verwendetes CSS in der endgültigen Ausgabe gebündelt wird. Ein typischer Anwendungsfall ist Bootstrap: Es handelt sich um eine mittelgroße Bibliothek mit mehreren UI-Klassen für verschiedene Komponenten. Wenn Ihre Anwendung beispielsweise 10% der Bootstrap-Klassen verwendet, sind die restlichen 90% die einzige Aufblähung in Ihrer endgültigen CSS-Datei. Dank PurgeCSS können solche nicht verwendeten CSS-Dateien identifiziert und am Erstellungsprozess gehindert werden, was zu viel kleineren endgültigen CSS-Dateien führt (eine 5-6-fache Größenreduzierung ist ziemlich normal)..

Löschen Sie also unnötiges CSS mit PurgeCSS! ��

Rückenwind

Rückenwind ist ein CSS-Framework, aber es widerspricht so sehr dem Korn, dass ich dachte, ich würde es hier in die CSS-Tools aufnehmen. Wenn Sie Inline-CSS hassen (wer nicht?!), Führt Rückenwind höchstwahrscheinlich dazu, dass Sie sich beim ersten Auftreten entsetzt zurückziehen. Lassen Sie uns einen ersten Eindruck davon bekommen, wie Sie ein typisches Formular mit Tailwind CSS codieren können:

Nutzername

Passwort

Bitte wählen Sie ein Passwort.

Anmelden


Passwort vergessen?

© 2019 Acme Corp. Alle Rechte vorbehalten.

„Ist das ein Witz oder was?! Was sind all diese nervigen kleinen Klassen? Warum zum Teufel setze ich bei näherer Betrachtung die Ränder, Auffüllungen und Farben direkt zusammen mit dem HTML-Code? Ist das 2019 oder was? “

Gedanken wie diese werden erwartet. Ich weiß es, weil es mir genauso ging und ich sofort den Deckel des Rückenwinds schloss. Erst bis später stieß ich auf einen Podcast, in dem der Gast eine trendige, anständige Website in Tailwind überarbeitet hatte, auf die ich aufmerksam wurde.

Bevor wir fortfahren, betrachten Sie diese Fragen:

  • Haben Sie es satt, sich Standard-Framework-Klassen und deren Funktionen zu merken, damit Sie Ihre Designs nach Ihren Wünschen anpassen können? Ein gutes Beispiel ist das Ändern des Erscheinungsbilds und Verhaltens der Bootstrap-Navigationsleiste.
  • Denken Sie, dass beliebte Frameworks wie Bootstrap übertrieben sind und versuchen, viel mehr zu tun, als sie sollten??
  • Mischen Sie Frameworks, weil Sie das Beste von allen Welten wollen??
  • Möchten Sie mehr Kontrolle über Ihre Designs haben und dennoch das Vanille-CSS-Erlebnis als überwältigend empfinden??

Wenn die Antwort auf eine dieser Fragen “Ja” lautet, brauchen Sie dringend Rückenwind. Schauen wir uns nun an, was Rückenwind ist und was er tut.

Rückenwind ist ein sogenanntes Utility-First-CSS, das sich von dem unterscheidet, was wir in unseren täglichen Arbeitsabläufen tun: semantisches CSS. Der Unterschied zwischen semantischem CSS und Dienstprogramm-CSS besteht darin, dass erstere versuchen, Stilelemente nach dem Namen der visuellen Abschnitte zu gruppieren, die auf der Seite angezeigt werden. Wenn Sie also ein Navigationsmenü, Karten, Karussell usw. auf einer Seite haben, besteht die semantische Vorgehensweise darin, CSS-Stilregeln unter Klassen wie .nav, .card, .carousel usw. zu gruppieren ihre Unterabschnitte sind entsprechend gekennzeichnet (z. B. .card-body, .card-footer usw.). Dies ist bei weitem der häufigste Ansatz für CSS, und wir alle kennen ihn durch Frameworks wie Bootstrap, Foundation, Bulma, UI Kit usw..

Der „Utility“ -Stil zum Schreiben von CSS-Namensklassen entspricht genau ihrer Funktion: Eine Klasse, die den Rand für die Ober- und Unterseite steuert, wird als .margin-y-medium bezeichnet und kann an einer beliebigen Stelle im HTML-Code angewendet werden Markup, wo dieser Rand benötigt wird. Dies führt zwar zu einem gewissen Kriechen des Klassennamens (werfen Sie einen kurzen Blick auf den Code, den ich zuvor geteilt habe, oder auf den Screenshot – so viele Klassen!), Aber die Absicht des CSS ist glasklar: Sie müssen nicht springen Hin und her in der Dokumentation, Ihrem CSS und Ihrem HTML, um die richtigen Namen und den richtigen Effekt herauszufinden.

Es ist eine sehr befreiende Arbeitsweise, aber es gibt auch einen Haken: Sie müssen Ihre CSS-Grundlagen solide anwenden (einschließlich moderner Konzepte wie der Flexbox). Dies liegt daran, dass Tailwind keine sofort einsatzbereiten Stile für Komponenten auf Ihrer Seite bietet und Sie die Stile aus den angegebenen Bausteinen erstellen müssen. Ein weiteres Problem ist das Setup: Mit Tailwind können Sie mehrere CSS-Klassen zu sogenannten Komponenten zusammenfassen. Dies erfolgt jedoch über JavaScript und erfordert einen Modullader und einen Bundler wie Webpack.

Alles gesagt und getan, Rückenwind ist eine polarisierende, auffällige neue Art des Stylings und wird diejenigen ansprechen, die sich nach größerer Einfachheit und Kontrolle sehnen.

Saas

Obwohl Sass gibt es schon lange, ich habe es hier aufgenommen, weil Entwickler immer noch nicht wissen, wie nützlich es ist. Stylistic Awesome Style Sheets (oder SASS) ist eine Obermenge von CSS, die entwickelt wurde, um den Wahnsinn zu zähmen, der sich in das Projekt einschleicht, sobald CSS über einige Zeilen hinaus wächst.

Stellen Sie sich Folgendes vor: Sie haben einen langen Weg zurückgelegt, um das CSS für Ihr Projekt zu schreiben. Sie verwenden einige Farben und haben einige sinnvolle Ränder für verschiedene Divs, Schriftstile usw. herausgefunden. Nur dass Sie jetzt feststellen, dass nicht alles so gut zusammen hängt. Vielleicht möchten Sie größere Ränder für alle Abschnitte, Karten und Schaltflächen ausprobieren. Nun, was nun? Schon die Idee, Ihre riesige CSS-Datei durchsuchen und ersetzen zu müssen, reicht aus, um Kopfschmerzen zu verursachen. Das haben wir alle getan und wir alle wissen, wie fehleranfällig es ist. Sass löst dieses Problem durch die Einführung von Variablen:

Wenn wir HTML schreiben, verschachteln wir Elemente in anderen Elementen. Beim Schreiben von CSS müssen wir jedoch eine flache Hierarchie von Regeln schreiben, was es schwierig macht, das CSS mental in den HTML-Code zu „passen“. Mit Sass können Sie die Seitenstruktur in Ihren Stildateien nachahmen:

All dies kratzt nicht einmal an der Oberfläche der Goodies, die Sass anbietet: modularer Aufbau, einschließlich Dateien, Mixins, Vererbung. . . Die Liste geht weiter und weiter. Sicher, Sie müssen einen Sass-Compiler-Workflow lernen und in Ihren integrieren, aber meiner Meinung nach sind diese paar Stunden eine Investition, die sich immer wieder auszahlt!

CSS-Linters

Da Webdesigner (und Benutzeroberflächenentwickler – obwohl ich mich frage, wie sich diese beiden Begriffe unterscheiden ��) einfache Texteditoren verwenden – oder wie heutzutage Code direkt aus den Chrome-Entwicklungstools – erhalten sie selten etwas von a oder profitieren davon Linter. Auf der anderen Seite kennen Programmierer, die gute Texteditoren wie VS Code, Sublime Text oder andere IDEs verwenden, dieses Tool sehr gut, da es für sie selbstverständlich ist. Der Punkt ist jedenfalls, wenn Sie einer der CSS-Entwickler sind, die in chaotischem CSS ertrinken, könnten Sie von einem Linter profitieren.

Einfach ausgedrückt ist ein Linter ein Programm, das Ihren Code auf Fehler und Inkonsistenzen überprüft. Dies geschieht mithilfe einer Reihe von Regeln, mit denen herausgefunden werden kann, was falsch und was inkonsistent ist. Gute Linters lassen sich in IDEs und Code-Editoren integrieren und können so konfiguriert werden, dass sie jedes Mal ausgeführt werden, wenn Sie die Quelldatei speichern. Sie helfen Ihnen auch bei der Farbvorschau, bei Fehlern und bei der automatischen Vervollständigung beim Erstellen Ihrer CSS-Dateien:

Aber hier ist das Beste: Wenn Sie einem bestimmten CSS-Stil und einer bestimmten CSS-Formatierung folgen, können Sie den Linter zu Ihrer Zufriedenheit optimieren. Dadurch wird sichergestellt, dass das CSS in einem Projekt dem gleichen Styleguide folgt (der Linter kann auch so konfiguriert werden, dass die Datei bei jedem Speichern / Festschreiben des Quellcodes automatisch formatiert wird). Egal, ob Sie im Team oder alleine arbeiten, ein Linter ist immer eine großartige Ergänzung für Ihren Projektworkflow.

Fazit

Ich bin mir sicher, dass Sie inzwischen davon überzeugt sind, dass die moderne CSS-Entwicklung weit entfernt von dem Herding-the-Cats-Ansatz der Vergangenheit ist. ��

Trotzdem gebe ich wieder etwas zu, auch wenn ich wie ein gebrochener Rekord klinge: Einige der Tools, die ich in diesem Artikel behandelt habe, sind nicht einfach einzurichten, insbesondere wenn Sie nicht mit dem npm-Ökosystem vertraut sind . Aber bevor Sie sich angewidert fühlen und Ihr Gesicht abwenden, sagen Sie mir Folgendes: War CSS einfach, als Sie das erste Mal waren? Lernen es? War es einfach zu lernen, ein Div zu zentrieren, die Stimmungsschwankungen von Schwimmern zu beherrschen und so weiter? Ebenso haben die hier beschriebenen Tools eine gewisse Lernkurve, aber sie sind es wert.

Ehrlich gesagt, sobald Sie die Ergebnisse erfahren haben, werden Sie sich dafür strampeln, dass Sie dies nicht früher tun. Und lassen Sie uns die Bedeutung von CSS, das modular, schlank und gut organisiert ist, nicht unterschätzen!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map