Share
Wenn es etwas gibt, was Sie wirklich über PostCSS wissen müssen, dann ist es das Sie sollten lernen, was es ist und wie man es benutzt schnellstmöglich.
In dieser Serie werden wir uns eingehend mit PostCSS beschäftigen und Sie durch alle wichtigen Anwendungsbereiche führen. Wenn Sie noch nicht das Gefühl hatten, wozu PostCSS fähig ist, machen Sie sich bereit für eine mutige neue CSS-Welt.
PostCSS hat mit rasender Geschwindigkeit an Popularität gewonnen. Immer mehr Menschen fangen an zu verstehen, was sie bieten, und sie genießen diesen "Glühbirnenmoment", wenn sie erkennen, wie sie ihn in ihren eigenen Projekten einzigartig einsetzen können.
Im Jahr 2014 gab es insgesamt etwas weniger als 1,4 Millionen Downloads, aber von Januar bis Juni 2015 waren bereits mehr als 3,8 Millionen Downloads vorgenommen worden.
Autoprefixer, ein sehr beliebtes PostCSS-Plugin, wird von Google, Shopify, Twitter, Bootstrap und CodePen verwendet. WordPress verwendet außerdem Autoprefixer sowie das RTLCSS-Plugin. Alibaba verwendet mehrere PostCSS-Plugins, entwickelt eigene und trägt zu anderen Plugin-Projekten bei.
Darüber hinaus hat Mark Otto davon gesprochen, dass Bootstrap Version 5 in PostCSS geschrieben wird:
Ach ja, btw-Bootstrap 4 wird in SCSS sein. Und wenn Sie sich interessieren, wird v5 wahrscheinlich in PostCSS sein, denn heiliger Mist, der cool klingt.
- Mark Otto (@mdo) 23. April 2015
PostCSS wurde gerade in CodePen.io integriert und kann inline verwendet werden, indem es in den CSS-Einstellungen ausgewählt wird:
PostCSS auf CodePenPostCSS wächst, es wächst schnell und aus gutem Grund.
Was ist also PostCSS? Die beste Definition stammt von der projekteigenen GitHub-Seite:
„PostCSS ist ein Tool zur Transformation von CSS mit JS-Plugins. Diese Plugins können Variablen und Mixins unterstützen, zukünftige CSS-Syntax, Inline-Bilder und mehr transpilieren.
Kurz gesagt, PostCSS nimmt CSS in eine Form von Daten, die JavaScript manipulieren kann. JavaScript-basierte Plugins für PostCSS führen dann die Code-Manipulationen durch. PostCSS selbst ändert Ihr CSS nicht, es ebnet lediglich den Weg für Plugins, um die gewünschten Transformationen durchzuführen.
Es gibt im Wesentlichen keine Einschränkungen für die Art der Manipulation, die PostCSS-Plugins auf CSS anwenden können. Wenn Sie daran denken können, können Sie wahrscheinlich ein PostCSS-Plugin schreiben, um dies zu ermöglichen.
PostCSS-Plugins können sich wie Präprozessoren verhalten. Sie können Code optimieren und autoprefixieren, sie können zukünftige Syntax hinzufügen, sie können Fusseln ausführen, sie können Variablen und Logik verarbeiten, sie können vollständige Rastersysteme bereitstellen, sie können Codierungskürzel anbieten ... die Liste ist lang und vielfältig.
Die Tatsache, dass Sie mit den PostCSS-Plugins praktisch alles tun können, was PostCSS noch relativ neu ist, hat zu einigen falschen Vorstellungen über das Tool geführt.
Viele Leute (zu denen ich ursprünglich gehörte) hatten einen unvollständigen Eindruck davon, was PostCSS tatsächlich ist, und haben daher entweder versäumt, was PostCSS zu bieten hat, oder zu spät an den Tisch gekommen.
Bevor wir weitergehen, klären wir ein paar Dinge auf, die PostCSS enthält nicht.
Zahlreiche Entwickler haben angegeben, dass sie CSS-Präprozessoren zugunsten von PostCSS aufgeben. Inzwischen sagen andere, dass sie PostCSS nicht mögen, weil sie ihren aktuellen Präprozessor bevorzugen. PostCSS ist jedoch nicht ein Präprozessor.
Ja, Sie können es auf jeden Fall als Präprozessor verwenden, wenn Sie möchten, aber Sie können PostCSS auch ohne jegliche Präprozessor-ähnliche Funktionalität verwenden. Sie können sogar Ihren bevorzugten Präprozessor in verwenden Verbindung mit PostCSS.
PostCSS hat das Wort "post" im Namen, aber es ist auch kein "Postprozessor". Unter Nachbearbeitung versteht man in der Regel ein fertiges Stylesheet, das gültige / standardisierte CSS-Syntax enthält und verarbeitet, um beispielsweise Herstellerpräfixe hinzuzufügen. PostCSS ist jedoch nicht darauf beschränkt, nur auf diese Weise zu arbeiten. Wie oben erwähnt, kann es sich auch wie ein Vorprozessor verhalten.
Es ist vielleicht am besten, PostCSS einfach als "Prozessor" zu betrachten. Als Andrey Sitnik, der Schöpfer von PostCSS, auf Twitter sagte:
Es ist Zeit, meine Fehler zugeben. Der Begriff „Postprozessor“ war schlecht. Das PostCSS-Team hat aufgehört, es zu benutzen. https://t.co/vs2AiXGoJy
- PostCSS (@PostCSS) 28. Juli 2015
Und wie der reiche PostCSS-Mitwirkende und Plugin-Entwickler Maxime Thirouin auf Twitter beschrieben hat, anstatt den "Post" in PostCSS, der sich auf "Post" -Verarbeitung bezieht, kann er besser als "CSS und mehr" verstanden werden..
@HugoGiraudel niemand in Postcss-Mitwirkenden verwendet diesen Ausdruck mehr. Jetzt ist Postcss wie "css and beyond"
- Maxime Thirouin (@MoOx) 21. Juli 2015
Es gibt einige hervorragende und sehr bekannte PostCSS-Plugins, mit denen Sie in zukünftiger Syntax schreiben können, d. H. Mit CSS, das in der Zukunft verfügbar sein wird, aber noch nicht weitgehend unterstützt wird. PostCSS unterstützt jedoch nicht unbedingt die zukünftige Syntax.
Einige Entwickler haben sich dagegen geäußert, PostCSS zu verwenden, da sie sich nicht sicher sind, ob sie mit der Erstellung zukünftiger Syntax vertraut sind. Das Schreiben der zukünftigen Syntax ist jedoch nur eine von vielen Möglichkeiten, PostCSS zu verwenden.
Wenn Sie dies wünschen, können Sie PostCSS verwenden, um Ihre Entwicklungsprozesse vollständig zu revolutionieren, ohne dass eine Zeile zukünftiger Syntax in Sicht ist.
Der Erfolg des Autoprefixer-Plugins hat dazu geführt, dass PostCSS allgemein als etwas wahrgenommen wird, das Sie in Ihrem abgeschlossenen CSS ausführen, um es aufzuräumen und für Geschwindigkeit und Browser-übergreifende Kompatibilität zu optimieren. Dies ist die Wahrnehmung, die ich selbst hatte, bis ich erfuhr, wie viele andere Dinge Sie mit PostCSS erreichen können.
Ja, es gibt viele fantastische Plugins, die großartige Aufräum- und Optimierungsprozesse bieten, aber diese sind nur ein Bruchteil des Angebots.
Das Beste an PostCSS ist, dass es nicht auf eine bestimmte Art von Funktionalität beschränkt ist. Es stellt eine vollständig anpassbare und konfigurierbare Reihe von Funktionen dar, die möglicherweise unbegrenzt sind.
Betrachten Sie WordPress-Plugins als Parallele. E-Commerce-Plugins sind sehr beliebt, aber niemand betrachtet WordPress selbst als E-Commerce-Engine. Die Vorzüge von WordPress werden nicht anhand der E-Commerce-Plugins bewertet.
Im Fall von PostCSS sehe ich es gerne wie Brot, mit dem Sie ein Sandwich machen. An sich scheint es nicht viel zu sein, aber genau so soll es sein, und diese scheinbare "Leere" ist der Grund, warum es so viel Potenzial hat. Es ist die Kapazität für eine unendliche Vielfalt an Füllungen, die Ihnen etwas Erstaunliches gibt.
Ein Sandwich, gesternVersuchte ein Erdnussbuttersandwich und mochte es nicht? Das ist absolut kein Grund, Brot und Sandwiches für immer abzulegen. Probieren Sie stattdessen die nächste Füllung aus und entdecken Sie vielleicht etwas, das zu einem tollen neuen Teil Ihres täglichen Lebens wird.
PostCSS ist ein völlig anderer Ansatz als CSS. Ein Frontend-Auftragnehmer aus London, mit dem ich gesprochen habe, beschrieb es als "Schweizer Taschenmesser für die CSS-Produktion", und das ist eine durchaus treffende Beschreibung.
Schauen wir uns ein paar Dinge an, die PostCSS so besonders machen.
So erstaunlich PostCSS auch ist, es ist die lange Liste verschiedener Plugins, die es wirklich zum Leuchten bringen. Wenn Sie die Liste der verfügbaren Plugins auf der PostCSS-GitHub-Seite lesen, finden Sie eine Vielzahl von Funktionen, die noch nie in einem Bereich enthalten waren.
Es gibt Plugins für zukünftige Syntax, mit denen Sie Funktionen wie Farbfunktionen, konische Farbverläufe, benutzerdefinierte Eigenschaften, benutzerdefinierte Selektoren, benutzerdefinierte Aliase für Medienabfragen und vieles mehr verwenden können.
Es gibt Fallback-Plugins zum Erstellen von Legacy-Syntax, z. B. das Hinzufügen von Hexadezimal-Fallbacks rgba () Farben, Hinzufügen von Deckkraftfiltern für IE8, Konvertieren von Psuedo-Elementselektoren für IE8 und Generieren px Rückschläge für rem Einheiten.
Es stehen mehr als zwanzig Spracherweiterungs-Plugins zur Verfügung, darunter das Hinzufügen von Mixins, Variablen, Bedingungen für und für jede Schleife, die Erzeugung von BEM- und SUIT-Stilklassen sowie einige weitere.
Es gibt eine Auswahl an Farbmanagement-Plugins, die die Konvertierung von einem Farbformat in ein anderes ermöglichen, die Alpha-Stufen ändern, Farben kombinieren, farbblinde freundliche Farbschemata erzeugen, um nur einige zu nennen.
Es gibt Rastersysteme, Optimierungstools, Plugins, die Verknüpfungen und Abkürzungen hinzufügen, Linters und andere Analyse- und Berichterstellungs-Plugins.
Es ist nicht möglich, die ständig wachsende Vielfalt der aktuellen Plugin-Auswahl in wenigen Absätzen vollständig zu vermitteln. Schauen Sie sich also die Liste an.
Die Kehrseite der unglaublichen Liste der für PostCSS verfügbaren Plugins ist, dass Sie so viele oder so wenige davon verwenden können, wie Sie möchten.
Sie möchten nur PostCSS verwenden, um Ihr CSS effizienter und browserübergreifender zu machen? Laden Sie ein paar Optimierungs-Plugins hoch und schon sind Sie weg.
Möchten Sie PostCSS ausschließlich als Präprozessor verwenden? Verwenden Sie stattdessen einige Spracherweiterungs-Plugins, und Sie sind fertig.
Die grundlegende Philosophie von PostCSS ist die Feinkornmodularität, bei der es keine hulking Plugins gibt, die mehrere Funktionen ausführen. Stattdessen wird ein Plugin pro Funktion erstellt, und von dort aus können sie zu Packungen von Plugins mit allgemeiner Funktionalität zusammengestellt werden.
Sie können beispielsweise eine Auswahl von Plug-Ins für Spracherweiterungen auswählen und Ihren eigenen Präprozessor erstellen. Alternativ können Sie einfach das PreCSS-Paket laden, wodurch Sie automatisch auf mehrere Spracherweiterungs-Plugins zugreifen können.
Unabhängig davon, wie Sie PostCSS verwenden möchten, können Sie nur die Plugins ausführen, die Sie für Ihre spezifischen Zwecke benötigen. Das bedeutet, dass Sie nicht benötigte Funktionen nicht als Eigengewicht mitführen müssen.
Es gibt zwei Hauptgründe, warum PostCSS-Tests in Benchmarks sehr schnell sind. Zum einen müssen Sie nur die benötigten Plugins laden, wie oben beschrieben. Die andere ist, dass es mit JavaScript läuft.
Sie können diese Benchmarks mit https://github.com/postcss/benchmark für sich selbst ausführen
Das Ergebnis eines dieser Benchmarks, dem Testen von Parsings, verschachtelten Regeln, Mixins, Variablen und Mathematik, lautete:
PostCSS: 36 ms Nacharbeit: 77 ms (2,1 mal langsamer) libsass: 136 ms (3,8 mal langsamer) Weniger: 160 ms (4,4 mal langsamer) Stift: 167 ms (4,6 mal langsamer) Stylecow: 208 ms (5,7 mal langsamer) Ruby Sass: 1084 ms (30,1-fach langsamer)
Plugins für PostCSS sind in JavaScript geschrieben. Daher kann jeder, der JavaScript schreiben kann, ein Plugin für beliebige Zwecke erstellen. Um Ihnen eine Idee zu geben, betrachte ich mich keinesfalls als Hardcore-JavaScript-Entwickler, aber nachdem ich PostCSS entdeckt hatte, konnte ich innerhalb weniger Stunden mein erstes voll funktionsfähiges Plugin erstellen.
Preprozessor-Projekte wie Stylus, Sass und LESS leisten einen wunderbaren Job, aber sie können nicht jedem gerecht werden. Sie müssen entscheiden, welche Funktionen ihren Anwendern insgesamt am besten dienen. Wenn Sie über Funktionen verfügen, die Sie gerne hätten, können Sie eine Funktionsanforderung stellen. Es kann jedoch davon ausgegangen werden, dass sie mit den umfassenderen Anforderungen des Projekts übereinstimmt.
Selbst wenn Sie eine Funktionsanforderung machen, die als geeignet erachtet wird, handelt es sich bei den Betreuern des Projekts normalerweise um unbezahlte Freiwillige, die möglicherweise nicht die Zeit haben, sie zu entwickeln. Wenn Sie also nicht über die Fähigkeit verfügen, dieses Feature selbst zu erstellen, haben Sie kein Glück.
Mit PostCSS auf der anderen Seite müssen Sie niemanden fragen. Wenn Sie ein neues Feature wünschen, können Sie es machen. Aus meiner Erfahrung wäre der für die Erstellung eines PostCSS-Plugins erforderliche JavaScript-Level für viele Frontend-Entwickler überschaubar.
In einem späteren Tutorial dieser Serie werden wir ein grundlegendes PostCSS-Plugin erstellen. Selbst wenn Sie sich nicht als JavaScript-Experte bezeichnen, werden Sie die Erstellung des PostCSS-Plugins für durchaus machbar halten.
Ein sehr großer Teil der PostCSS-Plugins erfordert nicht die Verwendung einer benutzerdefinierten Syntax, wie es bei Präprozessoren üblich ist. Sie können vielmehr auf reguläres CSS angewendet werden. Das bedeutet, dass Sie PostCSS mit jeder CSS-Datei verwenden können, über die Sie verfügen, z. B. vollständige Stylesheets eines Front-End-Frameworks, eines anderen Projekts oder eine Datei Normalize.css.
Das bedeutet auch, dass Sie nicht an Projekten gesperrt sind, die einen bestimmten Präprozessor verwenden (Stylus, Sass oder LESS), da Sie PostCSS immer auf das kompilierte CSS anwenden können. Wenn Sie beispielsweise Foundation über Sass verwenden, können Sie Optimierungs- und zukünftige Syntax-Plugins ausführen, nachdem Sie die CSS-Dateien Ihres Projekts generiert haben.
Wir sehen auch ganze Bibliotheken, die mit PostCSS erstellt wurden, wo sie in der Vergangenheit in Stylus, Sass oder LESS geschrieben wurden.
Beispielsweise pflegte Cory Simmons ursprünglich sowohl die Stylus- als auch die Sass-Version seines Lost-Rastersystems, sodass Benutzer beider Vorprozessoren Zugriff erhalten konnten. Er portierte das Projekt anschließend auf PostCSS, was bedeutet, dass nun jeder Lost verwenden kann, einschließlich Stylus- und Sass-Benutzer, aber auch weniger Benutzer und Personen, die überhaupt nicht mit einem Präprozessor arbeiten.
Da PostCSS auf JavaScript basiert, ist es nicht erforderlich, dass Sie Ruby installiert haben, und es wurden bereits Integrationen für verschiedene Entwicklungstools erstellt.
Accentsconagua
@ Regeln in Ihrem CSSnpm installieren. Dies ermöglicht eine einfache gemeinsame Nutzung von PostCSS-Projekten trotz der Vielzahl möglicher Variationen beim Einrichten von Plugins.Im nächsten Abschnitt "Kurzanleitung" dieser Serie erfahren Sie, wie Sie PostCSS einrichten können.
Das erste, was Sie wissen müssen, ist, dass PostCSS schnell Dampf aufnimmt. Aus gutem Grund ist es jetzt an der Zeit, ein klares Verständnis dafür zu entwickeln, wie es Ihren Entwicklungsprozessen helfen kann.
In dieser Serie beginnen wir, indem wir Sie Schritt für Schritt durch die Tutorials führen, um mit PostCSS zu beginnen:
Von dort aus betrachten wir die verschiedenen Möglichkeiten, wie Sie PostCSS in den Tutorials verwenden können, genau:
Zum Abschluss bringen wir Sie durch Erstellen Sie Ihr eigenes PostCSS-Plugin.
Möglicherweise bemerken Sie ein auffälliges Fehlen eines Tutorials zur Verwendung von PostCSS, um zukünftiges CSS zu aktivieren, vor allem angesichts der Tatsache, dass viele Leute beides als beinahe gleichbedeutend betrachten.
Der Grund für diese vorübergehende Abwesenheit ist das führende Plugin für zukünftiges CSS, cssnext. Es sieht so aus, als würde es gerade eine grundlegende Transformation durchlaufen, die die für die Verwendung erforderlichen Schritte erheblich verändern könnte. Daher behalten wir es im Auge und bieten Ihnen nach dem Übergang des Projekts ein neues Tutorial.
Also fangen wir an! Im nächsten Tutorial werden wir direkt in unseren „Quickstart Guide“ aufgenommen und zeigen Ihnen, wie Sie mit PostCSS am schnellsten arbeiten können. Ich sehe dich dort!
