Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Modulares Prä- und Post-Processing: Darum erobert PostCSS die Frontend-Welt

PostCSS. (Grafik: Shutterstock)

PostCSS wird immer beliebter. Wir verraten euch, wie das modulare JavaScript-Tool funktioniert.

PostCSS: Was ist der Unterschied zwischen einem Prä- und einem Postprozessor

Präprozessoren wie Sass oder Less gehören heute für viele Frontend-Entwickler zum alltäglichen Arbeitswerkzeug. Sie generieren aus der jeweiligen Stylesheet-Sprache standardkonformen CSS-Code. Ein Postprozessor wiederum nimmt euren bestehenden CSS-Code und verarbeitet ihn weiter. So könnt ihr beispielsweise Vendor-Prefixes automatisch hinzufügen.

Trotz des Namens handelt es sich bei PostCSS allerdings nicht um einen reinen Postprozessor. Vielmehr ist es ein modulares JavaScript-basiertes Tool, das Prä- und Post-Processing-Aufgaben übernehmen kann. Und ja: Ihr könnt PostCSS auch in Kombination mit eurem Lieblingspräprozessor einsetzen.

PostCSS ist ein Node.js-Modul, das euren CSS-Code in einen abstrakten Syntaxbaum umsetzt. Anschließend werden alle gewünschten Plugins darauf angewendet und das Ergebnis am Ende wieder als CSS ausgegeben. Was genau diese Plugins aber letztlich machen, hängt völlig von euch ab.

Modularer Prozessor: PostCSS wird immer beliebter. (Screenshot: npm-stat)
Modularer Prozessor: PostCSS wird immer beliebter. (Screenshot: npm-stat)

Genau diese Vielseitigkeit macht PostCSS immer beliebter. 2014 wurde das Tool laut npm-stat etwa 1,4 Millionen mal runtergeladen. Zum jetzigen Stand waren es 2015 schon mehr als 8,5 Millionen Downloads. PostCSS wird auch schon von Tech-Riesen wie Google, Shopify, Twitter oder WordPress eingesetzt. Seit einigen Monaten könnt ihr PostCSS auch auf CodePen verwenden.

Wofür setze ich PostCSS ein?

Diese Frage lässt sich nicht wirklich eindeutig beantworten, denn wofür ihr PostCSS letztlich verwendet, hängt wie schon erwähnt ganz von euren Bedürfnissen ab. Derzeit existieren mehr als 200 verschiedene PostCSS-Plugins, mit denen ihr die unterschiedlichsten Aufgaben durchführen könnt. Um das ein bisschen klarer zu machen, wollen wir euch zwei der bekanntesten PostCSS-Plugins vorstellen.

Autoprefixer

Das wohl am weitesten verbreitete PostCSS-Plugin ist autoprefixer. Dank dieses Plugins müsst ihr euch keine Gedanken mehr um Vendor-Prefixes machen. Ihr schreibt euren CSS-Code einfach ohne sie und das Plugin kümmert sich anschließend für euch darum. Autoprefixer nutzt dazu die Daten von Can I Use. Hier findet ihr eine interaktive Demo des Plugins.

Cssnext

Die CSS-Spezfikationen entwickeln sich ständig weiter. Allerdings dauert es natürlich immer eine Weile, bis die entsprechenden Features auch von den gängigen Browsern unterstützt werden. Hier kommt cssnext ins Spiel: Dank des Plugins könnt ihr schon jetzt die aktuellste CSS-Syntax verwenden, ohne euch um Kompatibilität Gedanken zu machen.

Grundsätzlich hört es bei diesen Beispielen aber noch lange nicht auf. Am besten ihr werft einen Blick auf diese Übersichtsseite und schaut euch selbst an, welche Plugins euch zur Verfügung stehen. Noch einfacher findet ihr Plugins über diese Suchseite. Natürlich seid ihr aber nicht auf bestehende Plugins angewiesen. Sofern ihr über ausreichende Javascript-Kenntnisse verfügt, könnt ihr auch jederzeit eigene PostCSS-Plugins schreiben. Eine entsprechende Einführung findet ihr hier.

Und welche Aufgaben löst ihr mit PostCSS? Schreibt uns in den Kommentaren!

via www.smashingmagazine.com

Bitte beachte unsere Community-Richtlinien

2 Reaktionen
Jonas Hamm

Mir fällt momentan auch kein Grund ein, PostCSS in der Produktion einzusetzen, da Gulp (oder Grunt) bisher auch alles kann, was ich benötige. Ich vermute, dass es irgendwann PostCSS-Plugins geben wird, die den Einsatz dann sinnvoll machen werden.

Antworten
Jannik Baranczyk

Wo genau liegt denn der Unterschied zu Gulp? Und wo liegen die Vorteile?

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.