Die Kluft Zwischen CSS und JavaScript: CSS-Module, PostCSS und die Zukunft von CSS

0
8

In der früheren post in dieser zweiteiligen Serie haben wir untersucht, der CSS-JS-Landschaft und realisieren wir nicht nur das CSS-JS produzieren können kritische Stile, sondern auch, dass einige Bibliotheken nicht haben sogar eine Laufzeit. Wir sahen, dass die user experience deutlich verbessern können durch hinzufügen von clevere Optimierungen, die ist, warum diese Serie konzentriert sich auf developer experience (die Erfahrung der authoring-Stilen).

In diesem Teil werden wir erkunden die Werkzeuge für “plain ol’ CSS” durch die Umgestaltung der Foto-Komponente aus unseren bisherigen Beispiel.

Kontroversen und #hotdrama

Eines der bekanntesten CSS-Debatten ist, ob die Sprache ist in Ordnung, nur die Art und Weise, dass es ist. Ich denke, diese Debatte am Leben bleibt, denn es ist etwas wahres an beiden Seiten. Zum Beispiel, während es ist wahr, dass CSS war ursprünglich entworfen, um den Stil eines Dokuments, anstatt Komponenten einer Anwendung, es ist auch wahr, dass die kommenden CSS-Eigenschaften dramatisch verändern wird, und dass viele CSS-Fehler stammen aus der Behandlung von styling wie ein nachträglicher Einfall, anstatt die Zeit zu lernen, es richtig oder mieten Sie jemanden, der gut darin.

Ich glaube nicht, dass CSS-tools selbst sind die Quelle der Kontroverse; wir werden wohl immer nutzen Sie, zum Teil zumindest. Aber Ansätze wie CSS-JS sind unterschiedlich, dass Sie patch bis die Mängel von CSS client-side JavaScript. Jedoch, CSS-JS ist nicht der einzige Ansatz hier, es ist nur das neueste. Denken Sie daran, wenn wir verwendet, um ähnliche Debatten über Präprozessoren, wie Sass? Sass hat features, wie Mixins in Verbindung, basieren nicht auf alle CSS-Vorschlag (nicht zu vergessen die gesamte eingerückt syntax). Allerdings Sass, geboren in einer ganz anderen Zeit und hat einen Punkt erreicht, wo es nicht mehr fair, um es in die Debatte, weil die Debatte sich verändert hat — so haben wir angefangen, Sie zu kritisieren CSS-JS, weil es ein leichter Gegner.

Ich denke, wir sollten Sie nutzen Werkzeuge, die uns die Nutzung vorgeschlagenen syntax heute. Wir verwenden JavaScript Verspricht als eine Analogie. Diese Funktion ist nicht von Internet Explorer unterstützt, so dass viele Leute auch einen polyfill für Sie. Der Punkt von polyfills ist es uns zu ermöglichen, zu tun, wie die Funktion unterstützt wird überall durch ersetzen des nativen browser-Implementierungen mit einem patch. Gleiches gilt für transpiling neue syntax mit tools, wie Babel. Wir können es noch heute, denn der code wird kompiliert, um einen älteren, gut unterstützte syntax. Dies ist ein guter Ansatz, da er erlaubt uns, künftige Funktionen heute und drücken Sie JavaScript weiterleiten der Weg preprocessing-tools wie Sass, haben geschoben, CSS vorwärts.

Mein nehmen auf die CSS-Kontroverse ist, dass wir Werkzeuge einsetzen, die es uns ermöglichen, zu verwenden zukünftigen CSS-heute.

Präprozessoren

Wir haben schon darüber gesprochen, ein wenig über CSS-Präprozessoren, es lohnt sich also, diskutieren Sie Sie in ein wenig mehr details und wie Sie sich in der CSS-JS-Gespräch. Wir haben Sass, Less und PostCSS (u.a.) verleihen kann unser CSS-code mit allen Arten von neuen features.

Für unser Beispiel werden wir nur besorgt zu sein, mit nesting, eine der häufigsten und leistungsstarken Funktionen von Präprozessoren. Ich schlage vor, mit PostCSS denn es verschafft uns eine fein abgestimmte Kontrolle über die features, die wir hinzufügen, was genau das ist, was wir brauchen, in diesem Fall. Die PostCSS-plugin, das wir verwenden werden ist postcss-Verschachtelung, denn es folgt der eigentliche Vorschlag für native CSS-Verschachtelung.

Der beste Weg, um PostCSS mit unserem tool kompilieren, webpack, ist postcss-loader nach css-loader in der Konfiguration. Beim hinzufügen Lader nach css-loader, ist es wichtig zu berücksichtigen, die für Sie in der css-loader Optionen einstellen importLoaders der Anzahl der erfolgreich Lader, die in diesem Fall 1:

{
test: /.css$/,
verwenden Sie: [
‘Stil-loader’,
{
loader: ‘css-loader’,
Optionen: {
importLoaders: 1,
},
},
‘postcss-loader’,
],
}

Dieser sorgt dafür, dass CSS-Dateien, importiert aus anderen CSS-Dateien verarbeitet werden, mit postcss-loader als gut.

Nach dem einrichten postcss-loader installieren wir postcss-Schachteln und in der PostCSS Konfiguration:

Garn hinzufügen postcss-Verschachtelung

Es gibt viele Möglichkeiten zu konfigurieren PostCSS. In diesem Fall gehen wir auf hinzufügen postcss.config.js Datei an die Wurzel unseres Projekts:

– Modul.Exporte = {
plugins: {
“postcss-nesting”: {},
},
}

Nun, wir können schreiben, eine CSS-Datei für unsere Foto-Komponente. Nennen wir es mal-Foto.css:

.Foto {
width: 200px;
&.abgerundete {
border-radius: 1rem;
}
}

@media (min-width: 30rem) {
.Foto {
width: 400px;
}
}

Wir werden auch hinzufügen, eine Datei namens utils.css-enthält eine Klasse für blinde und ausblenden von Elementen, wie wir bereits im ersten Teil dieser Serie:

.visuallyHidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}

Da unsere Komponente stützt sich auf dieses Dienstprogramm, lass utils.css-Foto.css durch das hinzufügen einer @import-Anweisung an die Spitze:

@import url(‘utils.css’);

Dadurch wird sichergestellt, dass webpack erfordert utils.css, Dank css-loader. Wir können utils.css, wohin wir wollen, und passen Sie die @import-Pfad. In diesem speziellen Fall, es ist ein Geschwister-Foto.css.

Nächste, lassen Sie die import-Foto.css in unsere JavaScript-Datei und verwenden Sie die Klassen, um Stil unserer Komponente:

importieren Reagieren von ‘reagieren’
import { getSrc, getSrcSet } from ‘./utils’
import./Foto.css’

const Foto = ({ publicId, alt, gerundet }) => (
<Abbildung>
<img
className={gerundet ? ‘Foto-abgerundete’ : ‘Foto’}
src={getSrc({ publicId, width: 200 })}
srcSet={getSrcSet({ publicId, breiten: [200, 400, 800] })}
Größen=”(min-width: 30rem) 400px, 200px”
/>
<figcaption className=”visuallyHidden”>{alt}</figcaption>
</figure>
)

Foto.defaultProps = {
gerundet: false,
}

export-Standard-Foto

Während dieser arbeiten werden, unsere Klasse und die Namen sind viel zu einfach und Sie wird sicherlich Auseinandersetzung mit anderen, völlig unabhängig von unseren .Foto Klasse. Eine der Möglichkeiten, zu arbeiten, um dieses ist mit einer Benennung der Methodik, wie BEM, umbenennen von Klassen (z.B. photo_rounded und Foto__was-ist-das-ich-kippe-selbst), um zu verhindern Zusammenstöße zu verhindern, aber die Komponenten werden schnell Komplex und Klasse-Namen neigen dazu, sich lange, je nach Komplexität des Projekts.

Erfüllen CSS-Module.

CSS-Module

Einfach ausgedrückt, CSS-Module sind CSS-Dateien, in denen alle Klassennamen und die Animationen stammen aus dem Bereich lokal standardmäßig. Sie sehen aus wie normale CSS. Zum Beispiel können wir unser Foto.css und utils.css-Dateien, wie CSS-Module, ohne Sie zu verändern, überhaupt, einfach, indem man Module: true, css-loader-Optionen:

{
loader: ‘css-loader’,
Optionen: {
importLoaders: 1,
Module: true,
},
}

CSS-Module sind ein sich entwickelndes feature und diskutiert werden könnte sogar eine größere Länge. Robin dreiteiligen Serie auf es ist ein guter überblick und Einstieg.

Während die CSS-Module, die sich sehr ähnlich sehen regelmäßige CSS, die Art, wie wir Sie verwenden, ist ganz anders. Sie importiert werden in JavaScript als Objekte, die dem Schlüssel entsprechen, verfasst Klasse die Namen und Werte sind eindeutige Klassen-Namen, die automatisch generiert werden, für uns zu halten, dass der Umfang beschränkt sich auf eine Komponente:

importieren Reagieren von ‘reagieren’
import { getSrc, getSrcSet } from ‘./utils’
Stile importieren von ‘./Foto.css’
import stylesUtils von ‘./utils.css’

const Foto = ({ publicId, alt, gerundet }) => (
<Abbildung>
<img
className={gerundet
? `${styles.Foto} ${styles.abgerundet}`
: Stile.Foto}
src={getSrc({ publicId, width: 200 })}
srcSet={getSrcSet({ publicId, breiten: [200, 400, 800] })}
Größen=”(min-width: 30rem) 400px, 200px”
/>
<figcaption className={stylesUtils.visuallyHidden}>{alt}</figcaption>
</figure>
)

Foto.defaultProps = {
gerundet: false,
}

export-Standard-Foto

Da wir mit utils.css als CSS-Modul, wir können entfernen Sie die @import-Anweisung am Anfang der Foto.css. Beachten Sie auch, dass die Verwendung von camelCase-format Klassennamen, erleichtert dies die Verwendung in JavaScript. Wenn wir verwendet hatten, Bindestriche, müssten wir schreiben Dinge, die in vollem Umfang wie stylesUtils[‘visuell-hidden’].

CSS-Module verfügen über zusätzliche Funktionen, wie Zusammensetzung. Jetzt, wir sind Import utils.css in Photo.js unsere Komponente Stile, aber lassen Sie uns sagen, dass wir wollen, dass die Verlagerung der Verantwortung für das styling der Bildunterschrift zu Foto.stattdessen css. So, soweit unsere JSX-code betroffen ist, der Stile.Beschriftung ist nur eine andere Klasse Namen; es passiert einfach so, um visuell ausblenden element, aber es kann sein Stil, anders in die Zukunft. So oder so, ein Foto.css werden diese Entscheidungen.

So fügen Sie eine Beschriftung Stil Foto.css erweitern die Eigenschaften der visuallyHidden-Dienstprogramm mithilfe komponiert:

.caption {
komponiert: visuallyHidden von ‘./utils.css’;
}

Wir könnten genauso gut weitere Regeln hinzufügen, um die Klasse, aber das ist alles was wir brauchen in diesem Fall. Nun, wir müssen uns nicht länger import utils.css in Photo.js; wir verwenden einfach die Stile.Beschriftung statt:

<figcaption className={styles.Bildunterschrift}>{alt}</figcaption>

Wie funktioniert das? Tun, die Stile aus visuallyHidden mitkopiert Untertiteln? Lassen Sie uns untersuchen Sie den Wert von Stilen.Beschriftung — whoa, zwei Klassen!!! Das ist richtig: eine vom visuallyHidden und das andere wird für eine andere Stile, die wir hinzufügen Bildunterschrift. CSS-JS macht es auch einfach zu duplizieren Stile mit Bibliotheken, wie Poliert, aber CSS-Module fördern Sie die Wiederverwendung bestehender Stile. Keine Notwendigkeit, erstellen Sie eine neue VisuallyHidden Reagieren Komponente gelten nur mehrere CSS-Regeln.

Nehmen wir es sogar noch weiter, indem die Prüfung dieser unbequem-Klasse Zusammensetzung:

abgerundet
? `${styles.Foto} ${styles.abgerundet}`
: Stile.Foto

Es gibt Bibliotheken für diese Situationen, wie Klassennamen, die nützlich sind für komplexere Klasse Komposition. In unserem Beispiel können wir aber weiter verwenden komponiert und umbenennen .gerundet auf .roundedPhoto:

.Foto {
width: 200px;
}

.roundedPhoto {
komponiert: Foto;
border-radius: 1rem;
}

@media (min-width: 30rem) {
.Foto {
width: 400px;
}
}

.caption {
komponiert: visuallyHidden von ‘./utils.css’;
}

Jetzt können wir den Klassennamen unserer Komponente in einem viel lesbarer Mode:

gerundet ? styles.roundedPhoto : Stile.Foto

Aber warten Sie, was passiert, wenn wir versehentlich einen der .roundedPhoto Regelsatz vor .Foto und einigen Regeln aus .Foto am Ende Regeln .roundedPhoto aufgrund der Spezifität? Keine Sorge, CSS-Module, die uns daran hindern, das zu Komponieren-Klassen definiert, die nach der aktuellen Klasse durch das werfen einer Fehlermeldung wie diese:

referenzierte Klasse Namen “Foto” in der komponiert nicht gefunden (2:3)

1 | .roundedPhoto {
> 2 | verfasst: Foto;
| ^
3 | border-radius: 1rem;
4 | }

Beachten Sie, dass es generell eine gute Idee, um einen Datei-Namenskonvention für CSS-Module, zum Beispiel mit der Erweiterung .- Modul.css, weil es üblich zu wollen, gelten einige Globale Stile als gut.

Dynamische Stile

So weit, wir haben bedingt anwenden von vordefinierten sets von Stilen, die sogenannte bedingte styling. Was ist, wenn wir wollen auch in der Lage sein, um die Feinabstimmung der border-radius der abgerundeten Fotos? Dies wird als dynamische Linienführung , weil wir nicht wissen, was der Wert gehen, um im Voraus zu entrichten; es kann sich ändern, während die Anwendung ausgeführt wird.

Es gibt nicht viele Anwendungsfälle für die dynamische styling — in der Regel sind wir styling-bedingt, aber in den Fällen, wenn wir müssen, wie würden wir diesen Ansatz? Während wir bekommen konnten, indem Sie mit inline-styles, eine native Lösung für diese Art von Problemen ist in der benutzerdefinierten Eigenschaften (ein.k.ein. CSS-Variablen). Ein wertvoller Aspekt dieser Funktion ist, dass der Browser aktualisiert Stile über benutzerdefinierte Eigenschaften als JavaScript-änderungen. Wir können eine benutzerdefinierte Eigenschaft festlegen auf ein element durch inline-styles, was bedeutet, dass es ausgelegt werden, dass dieses element und das element nur:

style={typeof borderRadius !== ‘undefined’ ? {
‘–border-radius’: borderRadius,
} : null}

In Foto.css, wir können diese benutzerdefinierte Eigenschaft auch mit var() und übergeben Sie den Standardwert als zweites argument:

.roundedPhoto {
komponiert: Foto;
border-radius: var(–border-radius, 1rem);
}

So weit wie JavaScript angeht, ist es erst wenn ein dynamischer parameter auf CSS, dann bei der CSS übernimmt, kann es anwenden, wird der Wert als-ist, berechnen eines neuen Werts von es mit calc(), etc.

Fallback

Zum Zeitpunkt des Schreibens dieses Artikels, die browser-Unterstützung für benutzerdefinierte Eigenschaften ist… naja, Sie für sich selbst entscheiden. Nicht die Unterstützung dieser Browser ist (wahrscheinlich) aus der Frage nach einem real-world-Anwendung, aber im Kopf behalten, dass einige Arten weniger wichtig sind, als andere. In diesem Fall ist es nicht eine große Sache, wenn die border-radius im IE ist immer 1rem. Die Anwendung muss nicht gleich Aussehen auf allen Browsern.

Die Art, wie wir können sorgen automatisch für fallbacks für alle benutzerdefinierten Eigenschaften zu installieren postcss-custom-Eigenschaften und fügen diese unseren PostCSS Konfiguration:

Garn hinzufügen postcss-custom-Immobilien
– Modul.Exporte = {
plugins: {
‘postcss-Schachteln’: {},
‘postcss-custom-properties’: {},
},
}

Dies erzeugt ein fallback für unsere border-radius-Regel:

.roundedPhoto {
komponiert: Foto;
border-radius: 1rem;
border-radius: var(–border-radius, 1rem);
}

Browser, die nicht verstehen, var() ignorieren der Regel, und verwenden Sie den vorherigen. Lassen Sie sich nicht den Namen des plugins nicht täuschen; es nur teilweise verbessert die Unterstützung für benutzerdefinierte Eigenschaften, die durch die Bereitstellung von statischen fallbacks. Der dynamische Aspekt kann nicht sein polyfilled.

Freilegen Werte an JavaScript

Im vorangegangenen Teil dieser Serie haben wir untersucht, wie CSS-JS ermöglicht es uns zu teilen, fast alles zwischen CSS und JavaScript-mit media queries als ein Beispiel. Es gibt keine Möglichkeit zur Erreichung dieses hier, richtig?

Dank Jonathan Neal, Sie können!

Erste, treffen postcss-preset-env, der Nachfolger cssnext. Es ist ein PostCSS plugin, das wirkt wie eine Vorgabe ähnlich wie @babel/preset-env. Es enthält plugins wie postcss-Schachteln, postcss-custom-Eigenschaften, autoprefixer etc. so können wir die Zukunft heute CSS. Es spaltet die plugins über vier Stufen der Standardisierung. Einige der features, die ich Ihnen zeigen möchte, sind nicht enthalten in der Standard-Bereich (Phase 2+), so werden wir Sie explizit aktivieren, mit denen, die wir brauchen:

Garn hinzufügen postcss-preset-env
– Modul.Exporte = {
plugins: {
‘postcss-preset-env’: {
features: {
‘nesting-Regeln”: true,
‘custom-Einstellungen’: true, // die sich schon in Stufe 2+
‘custom-media-queries’: true, // oooh, was ist das? 🙂
},
},
},
}

Beachten Sie, dass wir ersetzt unsere bestehende plugins, da diese postcss-preset-env-Konfiguration, was bedeutet, unsere bestehenden code sollte das gleiche wie vorher.

Mithilfe benutzerdefinierter Eigenschaften in media queries ist ungültig, weil das ist nicht, was Sie konzipiert wurden. Stattdessen verwenden wir benutzerdefinierte Medien-Anfragen:

@custom-Medien –Foto-Haltepunkt (min-width: 30em);

.Foto {
width: 200px;
}

@media (–Foto-Haltepunkt) {
.Foto {
width: 400px;
}
}

Obwohl dieses feature ist im experimentellen Stadium und daher nicht unterstützt in jedem browser, Dank postcss-preset-env-es funktioniert einfach! Ein Haken ist, dass PostCSS arbeitet auf einer pro-Datei-basis, so wird auf diese Weise nur Foto.css können –Foto-Haltepunkt. Lassen Sie uns etwas dagegen tun.

Jonathan Neal hat vor kurzem eine importFrom option in postcss-preset-env, die vergangen zu anderen plugins, die es unterstützen, als auch, wie postcss-custom-Eigenschaften und postcss-custom-Medien. Sein Wert kann vieles sein, aber für den Zweck in unserem Beispiel, es ist ein Pfad zu einer Datei, die importiert werden sollen, die Dateien PostCSS Prozesse. Wir nennen dies eine Globale.css und bewegen unsere custom media query gibt es:

@custom-Medien –Foto-Haltepunkt (min-width: 30em);

…und lassen Sie uns definieren, importFrom, die den Pfad zur global.css:

– Modul.Exporte = {
plugins: {
‘postcss-preset-env’: {
importFrom: ‘src/global.css’,
features: {
‘nesting-Regeln”: true,
‘custom-Einstellungen’: true,
‘custom-media-queries’: true,
},
},
},
}

Jetzt können wir löschen @custom-Medien werden in der obersten Zeile Foto.css-und unserem-Foto-breakpoint-Wert wird immer noch funktionieren, weil postcss-preset-env verwendet global.css zu kompilieren. Gleiche gilt für die benutzerdefinierten Eigenschaften und benutzerdefinierten Selektoren.

Nun, wie setzen Sie es keinen JavaScript? Bei experimentellen features wie benutzerdefinierte Medien-Anfragen standardisiert und umgesetzt in den wichtigsten Browsern, werden wir in der Lage, um Sie abzurufen, die nativ von CSS. Zum Beispiel, das ist, wie wir den Zugriff auf eine benutzerdefinierte Eigenschaft namens –font-family definiert :root:

const rootStyles = getComputedStyle(document.Körper)
const fontFamily = rootStyles.getPropertyValue(‘–font-family’)

Wenn Sie benutzerdefinierte Medien-Anfragen standardisiert werden wir wahrscheinlich in der Lage sein, um Ihnen den Zugang in ähnlicher Weise, aber in der Zwischenzeit haben wir nach einer alternative suchen. Wir konnten exportTo option zum generieren von JavaScript-oder JSON-Datei, die wir importieren, in JavaScript. Jedoch, die option war nicht speziell für diesen workflow denn webpack versuchen würde, zu verlangen, bevor es generiert. Auch wenn wir Sie erzeugt vor dem ausführen webpack, jedes update zu global.css würde dazu führen, webpack zu re-kompilieren zweimal, einmal zur Erzeugung der Ausgabe-Datei, und einmal mehr, um es zu importieren. Ich wollte eine Lösung, die unbelastet von der Umsetzung.

Für diese Serie habe ich eine Marke aufgebaut, die neue webpack loader genannt css-Zoll-loader nur für Sie! Es macht diese Aufgabe ganz einfach: alles, was wir brauchen, ist in unserer webpack-Konfiguration, bevor der css-loader:

{
test: /.css$/,
verwenden Sie: [
‘Stil-loader’,
‘css-Zoll-loader’,
{
loader: ‘css-loader’,
Optionen: {
importLoaders: 1,
},
},
‘postcss-loader’,
],
}

Dies macht kundenspezifische Medien-Anfragen, als auch die benutzerdefinierten Eigenschaften in JavaScript. Wir können auf Sie zugreifen, einfach durch den Import global.css:

importieren Reagieren von ‘reagieren’
import { getSrc, getSrcSet } from ‘./utils’
Stile importieren von ‘./Foto.- Modul.css’
import { customMedia } from ‘./global.css’

const Foto = ({ publicId, alt, gerundet, borderRadius }) => (
<Abbildung>
<img
className={gerundet ? styles.roundedPhoto : Stile.Foto}
style={
typeof borderRadius !== ‘undefined’
? { [‘–border-radius’]: borderRadius }
: null
}
src={getSrc({ publicId, width: 200 })}
srcSet={getSrcSet({ publicId, breiten: [200, 400, 800] })}
Größen={`${customMedia[‘–Foto-Haltepunkt’]} 400px, 200px`}
/>
<figcaption className={styles.Bildunterschrift}>{alt}</figcaption>
</figure>
)

Foto.defaultProps = {
gerundet: false,
}

export-Standard-Foto

Das ist es!

Ich erstellte ein repository zu demonstrieren, alle Konzepte, die diskutiert in dieser Serie. Die readme enthält auch einige weiterführende Tipps über die Vorgehensweise in diesem post beschrieben.

Ansicht Repo

Fazit

Es ist sicher zu sagen, dass tools wie der CSS-Modulen und PostCSS und kommende CSS-Funktionen sind bis zur Aufgabe der Umgang mit den vielen Herausforderungen des CSS. Von welcher Seite die CSS-Debatte sind Sie auf, dieser Ansatz ist einen Besuch Wert.

Ich habe ein starkes CSS-JS-hintergrund, aber ich bin sehr anfällig für hype, so halten Sie mit, die Welt ist hart. Welche Bibliothek soll ich benutzen nun, Stil-Komponenten oder emotion? Auch, während Stile, die neben dem Verhalten kann kurze, es ist auch das mischen von zwei sehr unterschiedlichen Sprachen — CSS ist sehr ausführlich im Vergleich zu JavaScript. Dieser Anreiz mir zu schreiben, weniger CSS, weil ich wollte, um zu vermeiden, die Datei zu überfüllt. Dies kann eine Frage der persönlichen Vorliebe, aber ich wollte nicht, dass das ein Problem sein. Die Verwendung einer separaten Datei CSS-schließlich gab meinen code ein wenig Luft.

Während die Beherrschung dieser Ansatz ist vielleicht nicht so einfach, wie CSS-JS, ich glaube, es ist lohnender, auf lange Sicht. Es wird verbessern Sie Ihre CSS-Fähigkeiten und machen Sie besser vorbereitet für die Zukunft.

Artikel-Serie:

  1. CSS-JS
  2. CSS-Module, PostCSS und die Zukunft von CSS (Dieser Beitrag)