Top 5 CSS-Tools für Webentwickler und Designer
By
Ankush
CSS hat einen langen Weg zurückgelegt, aber die Werkzeuge dafür haben es bis jetzt 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 ist eine der grundlegendsten Technologien, die das Web antreiben. Es ist keine richtige Programmiersprache oder ein geeignetes Framework an sich. Sobald Ihr Projekt an Bedeutung gewinnt, ist auch das Chaos größer - die Auswahlregeln scheinen allgegenwärtig zu sein, und es ist schwer 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, Spielzeug-Tools wie CSS-Generatoren, Menü-Generatoren usw. einzuschließen, da sie mehr Probleme verursachen als lösen.
Der CSS-Zug kommt! Lass uns gehen! 😛 😀
PostCSS
Wenn Sie JavaScript lieben, würden 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 ist jedoch nicht nur JavaScript-basierter 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 denke, ich werde PostCSS nicht gerecht, wenn ich das Rasterbeispiel nicht einbeziehe. Auf geht's. So etwas Einfaches:
div {
lost-column: 1/3
}wird in ein vollwertiges CSS-System umgewandelt, wobei fast alle Randfälle erledigt werden:
div {
width: calc(99.9% * 1/3 -
(30px - 30px * 1/3));
}
div:nth-child(1n) {
float: left;
margin-right: 30px;
clear: none;
}
div:last-child {
margin-right: 0;
}
div:nth-child(3n) {
margin-right: 0;
float: right;
}
div:nth-child(3n + 1) {
clear: both;
}Da es sich um eine JS-gesteuerte Sache handelt, ist PostCSS nicht gerade 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.
CSS bereinigen
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 ist ein kurzer Überblick. Wenn Sie bauen Single-Page-Anwendungen mit Front-End-Frameworks wie React, Angular, Vue usw. durchlaufen Sie einen sogenannten „Build-Prozess“. Im Wesentlichen codieren Sie Ihr gesamtes CSS, JS, SASS usw. in separaten Dateien (organisieren Sie sie so, wie Sie es am intuitivsten finden), aber sobald Sie fertig sind, sagen Sie dem Bundler, dass er das Ding „bauen“ soll. Was dies tut, ist den gesamten von Ihnen geschriebenen Quellcode zu lesen, verschiedene Filter darauf anzuwenden (Minifizierung, Verschleierung/Uglifizierung usw.) und die Ausgabe in einzelne Dateien auszuspucken, normalerweise „app.js“ für das gesamte JavaScript, und „app.css“ für alle CSS. Diese Dateien zusammen mit einer dünnen „index.html“ sind alles, was Sie brauchen, um das Front-End der Anwendung auszuführen. Der Nachteil ist, dass, da alles in diesen endgültigen Dateien enthalten ist, ihre Größe oft über das hinausgeht, was für eine schnelle Antwortzeit zulässig ist; Beispielsweise ist es nicht ungewöhnlich, eine „app.js“ zu sehen, die über 500 KB groß ist!
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% das einzige Aufblähen 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 CSS bereinigen!
Tailwind
Tailwind 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?!), Wird Rückenwind Sie höchstwahrscheinlich vor Entsetzen zurückschrecken lassen, wenn Sie zum ersten Mal darauf stoßen. Lassen Sie uns einen ersten Eindruck davon bekommen, wie Sie ein typisches Formular mit Tailwind CSS codieren können:
<div class="w-full max-w-xs">
<form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
<div class="mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2" for="username">
Username
</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Username">
</div>
<div class="mb-6">
<label class="block text-gray-700 text-sm font-bold mb-2" for="password">
Password
</label>
<input class="shadow appearance-none border border-red-500 rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="******************">
<p class="text-red-500 text-xs italic">Please choose a password.</p>
</div>
<div class="flex items-center justify-between">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
Sign In
</button>
<a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800" href="#">
Forgot Password?
</a>
</div>
</form>
<p class="text-center text-gray-500 text-xs">
©2019 Acme Corp. All rights reserved.
</p>
</div>„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 Website in anständiger Größe in Tailwind überarbeitet hatte.
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 die Vanille-CSS-Erfahrung 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.
Tailwind ist ein sogenanntes Utility-First-CSS, das sich von dem unterscheidet, was wir in unserem Alltag tun workflows: semantisches CSS. Der Unterschied zwischen semantischem CSS und Dienstprogramm-CSS besteht darin, dass ersteres versucht, Stilelemente nach den Namen der visuellen Abschnitte zu gruppieren, die auf der Seite erscheinen. Wenn Sie also ein Navigationsmenü, Karten, ein Karussell usw. auf einer Seite haben, wäre die semantische Vorgehensweise, CSS-Stilregeln unter Klassen wie z. B. zu gruppieren .nav, .card, .carouselusw., die in ihren Unterabschnitten entsprechend gekennzeichnet sind (z. B. .card-body, .card-footer, etc.). 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.
Auf der anderen Seite wird der „Utility“ -Stil zum Schreiben von CSS-Namensklassen genau entsprechend ihrer Funktion benannt: Eine Klasse, die den Rand für die Ober- und Unterseite steuert, wird als bezeichnet .margin-y-medium und kann überall im HTML-Markup angewendet werden, wo dieser Rand benötigt wird. Dies führt zwar zu einem gewissen Kriechen der Klassennamen (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.
Sass
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, haben einige sinnvolle Ränder für verschiedene Divs, Schriftstile usw. herausgefunden. Nur dass du jetzt merkst, 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 auf 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: modulares Design, Include-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 Sie immer wieder bezahlen wird!
Bourbon
Bourbon ist ein reines Sass-Toolset, das für Menschen lesbar und leichtgewichtig ist. Wenn Sie Sass verwenden, sollten Sie dieses Tool in Betracht ziehen, da es kostenlos ist und prägnante, einzeilige Methoden zum Ausführen verschiedener Aufgaben bietet.
Um beispielsweise die Rahmenfarben für die spezifischen Kanten einer Box festzulegen, müssen Sie nur den folgenden Code hinzufügen.
.element {
@include border-color(#a60b55 #76cd9c null #e8ae1a);
}
// CSS Output
.element {
border-left-color: #e8ae1a;
border-right-color: #76cd9c;
border-top-color: #a60b55;
}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-Entwicklertools - erhalten sie selten etwas von a oder profitieren davon Linter. Auf der anderen Seite Programmierer, die verwenden gute Texteditoren wie VS Code, Sublime Text oder andere IDEs kennen dieses Tool sehr gut, da es ihnen selbstverständlich ist. Wie auch immer, der Punkt ist, wenn Sie einer dieser CSS-Entwickler sind, die in chaotischem CSS ertrinken, könnten Sie von a . profitieren linter.
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 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.
Schlussfolgerung
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, besonders wenn Sie nicht mit dem befreundet sind npm Ökosystem. 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 zu beherrschen? floats, 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!
