CSS kann schwierig zu verwalten sein, insbesondere bei Websites mit angemessener Größe. Holen Sie sich mit diesem Präprozessor eine helfende Hand.

Nehmen wir an, Sie lernen eine wirklich coole CSS-Funktion kennen, beispielsweise die Verschachtelung. Aber wenn Sie es ausprobieren, stellen Sie fest, dass der Support schrecklich ist und es Jahre dauern wird, bis Sie es endlich nutzen können. Dies war bis zur Einführung von Präprozessoren wie PostCSS ein großes Problem in CSS.

Erfahren Sie, wie Sie mit PostCSS bereits heute während der Entwicklung modernes und zukünftiges CSS nutzen können. Sie erfahren genau, was PostCSS ist, wie Sie es verwenden können und wie Sie seine Funktionen am besten nutzen können.

Einrichten des Projekts

Navigieren Sie in einen leeren Ordner, erstellen Sie eine Datei mit dem Namen index.html und fügen Sie das folgende HTML-Markup in die Datei ein:

html>
<htmllang=„en“>
<Kopf>
<Verknüpfungrel=„Stylesheet“href=„src/styles.css“>
Kopf>


<Körper>
<P>AbsatzP>
<div>Abtdiv>
Körper>
html>
instagram viewer

Dieses HTML-Dokument stellt einen Absatz dar und Element. Außerdem wird eine Stylesheet-Datei mit dem Namen importiert Styles.css das ist drin src Ordner. Erstellen Sie die Datei im src Ordner und enthalten die folgenden CSS-Stilregeln:

KörperP {
Farbe: orange;
}
Körperdiv {
Farbe: Blau;
}
Körper {
Anzeige: Netz;
}

Dieses CSS gestaltet die Farbe beider Elemente auf der Seite und erstellt ein Rasterlayout. Die meisten Browser unterstützen die normale CSS-Syntax wie diese. Wenn Sie jedoch eine neuere Syntax im Auge haben, müssen Sie PostCSS einbinden.

Erstellen eines Node.js-Projekts und Installieren von PostCSS

Einfach ausgedrückt ermöglicht Ihnen PostCSS, modernes CSS in etwas umzuwandeln, das die meisten Browser verstehen können; ein Prozess, der allgemein als Transpiling bekannt ist. Dies ist ideal, wenn Sie neue, experimentelle oder nicht standardmäßige CSS-Eigenschaften in Ihrem Code ausprobieren möchten, die von großen Browsern möglicherweise nicht unterstützt werden.

PostCSS bietet außerdem ein umfangreiches Ökosystem an JavaScript-Plugins, die Sie installieren können, um bestimmte Funktionen wie CSS-Minimierung, Farbunterstützung und Linting-Unterstützung zu aktivieren.

Um PostCSS verwenden zu können, müssen Sie zunächst ein neues Node.js-Projekt initialisieren:

npm init -y

Dieser Befehl generiert eine package.json-Datei, die die Standardwerte für Ihre App enthält.

Als nächstes installieren Sie sowohl PostCSS als auch die PostCSS-CLI. Mit dem zweiten Paket können Sie PostCSS über die Befehlszeile ausführen:

npm i --save-dev postcss postcss-cli

Der --save-dev flag installiert beide npm-Pakete als Entwicklungsabhängigkeiten; Sie werden PostCSS und seine Plugins nur verwenden, um den CSS-Code während der Entwicklung zu verarbeiten.

Um mit der Verwendung von PostCSS über die zu beginnen Befehlszeilenschnittstelle, geh in dein package.json Datei und erstellen Sie das Einfache Build: CSS Befehl zum Transpilieren mit PostCSS:

„Skripte“: {
„build: css“: „postcss src/styles.css --dir dest -w“
}

Dieser Befehl übernimmt Ihr nacktes CSS (gespeichert in src/styles.css), tranpilieren Sie den Code und geben Sie ihn dann in aus Ziel Ordner. Ausführen der npm-Build: CSS Der Befehl erstellt diesen Ordner und füllt ihn mit dem Styles.css Datei mit browserlesbarem Code.

Wenn Sie Ihr CSS in HTML importieren, stellen Sie sicher, dass Sie aus dem Zielordner importieren, in dem Sie Ihr CSS kompilieren, und nicht aus dem Quellordner, aus dem PostCSS kompiliert. Dies ist in unserem Fall die dist Ordner, nicht der src Ordner.

Wenn Sie Ihre Website in einem Browser öffnen, werden Sie feststellen, dass die Website weiterhin auf das CSS zugreift. Jedes Mal, wenn Sie Änderungen an der Quelldatei vornehmen, kompiliert PostCSS den Code neu und die Änderungen werden auf der Webseite angezeigt.

Verwendung von PostCSS-Plugins

Es gibt Hunderte davon PostCSS-Plugins zum Hinzufügen von Präfixen, Linting, neuer Syntaxunterstützung und Dutzenden anderer Funktionen zu PostCSS. Nachdem Sie ein PostCSS-Plugin installiert haben, aktivieren Sie es im postcss.config.js Datei – eine JavaScript-Datei, mit der Sie alle Konfigurationen für PostCSS einrichten können.

Installiere das cssnano PostCSS-Plugin mit dem folgenden Befehl:

npm i --save-dev cssnano

Auch hier müssen Sie diese Abhängigkeiten nur als Entwicklungsabhängigkeiten speichern. Der Grund dafür ist, dass all dies während Ihrer Entwicklung geschieht. Sie benötigen weder PostCSS noch eines seiner Plugins, nachdem Sie die Site in die Produktion gebracht haben.

Um das neu installierte CSSNano-Plugin zu verwenden, müssen Sie den folgenden Code hinzufügen postcss.config.js Datei:

const cssnano = erfordern(„cssnano“)
Modul.exports = {
 Plugins: [
 cssnano({
 Voreinstellung: 'Standardeinstellungen'
 })
 ]
}

Wenn Sie nun zum Terminal zurückkehren und den Build-Befehl erneut ausführen, wird dadurch das Ausgabe-CSS minimiert (d. h. der Code wird so klein wie möglich gemacht). Wenn Sie also auf eine produktionsbereite Site umsteigen, wird Ihr CSS so klein wie möglich gehalten.

Verwendung moderner Funktionen wie Nesting

Angenommen, Sie möchten die Verschachtelungssyntax in Ihrem Stylesheet verwenden und ersetzen den Absatzblock in src/styles.css mit diesem:

Körper {
 & P {
Farbe: orange;
 }
}

Dieser Code ist mit der Version in Ihrem Startercode identisch. Dies führt jedoch zu einer Fehlermeldung, da die Syntax sehr neu ist und von den meisten Webbrowsern nicht unterstützt wird. Sie können die Unterstützung für diese Syntax mit PostCSS aktivieren, indem Sie das installieren postcss-preset-env Plugin.

Das Plugin stellt eine Reihe verschiedener Plugins für die Handhabung von CSS zusammen, je nachdem, in welchem ​​Stadium es sich befindet. Stufe 0 stellt die superexperimentellen Funktionen dar, die es möglicherweise nicht einmal in CSS schaffen. Stufe 4 hingegen betrifft Sprachfunktionen, die bereits Teil der CSS-Spezifikation sind.

Standardmäßig, Gegenwart-Env verwendet Funktionen der Stufe 2 (die es am wahrscheinlichsten in CSS schaffen). Sie können die Stufe jedoch in der Konfigurationsdatei beliebig ändern.

Um das Plugin zu installieren, führen Sie den folgenden Befehl aus:

npm i --save-dev postcss-preset-env

Dann in deinem postcss.config.js Datei müssen Sie das Plugin importieren und registrieren:

const cssnano = erfordern(„cssnano“)
const postcssPresetEnv = erfordern(„postcss-preset-env“)
Modul.exports = {
 Plugins: [
 cssnano({
 Voreinstellung: 'Standardeinstellungen'
 }),
 postcssPresetEnv({ Bühne: 1})
 ]
}

Sie sollten nur die Phase des neuen CSS-Codes bestehen, den Sie verwenden möchten. In diesem Fall gehen wir davon aus, dass sich die Verschachtelungsfunktion auf Stufe 1 befindet. Wenn Sie den Build-Befehl erneut ausführen und den Browser überprüfen, werden Sie feststellen, dass er den verschachtelten Code in Standard-CSS kompiliert hat, das der Browser verstehen kann.

Verwenden von PostCSS mit Frameworks

Die manuelle Konfiguration von PostCSS kann etwas mühsam sein. Aus diesem Grund verfügen fast alle modernen Frameworks über Bündelungstools (z. B. Vite, Snowpack und Parcel), und diese Tools verfügen über eine integrierte Unterstützung für PostCSS. Und selbst wenn dies nicht der Fall ist, ist das Hinzufügen von PostCSS-Unterstützung unglaublich einfach.

Denken Sie immer daran, dass Vite und die meisten anderen Bundler verwenden ES6-Modulsystem, nicht CommonJS. Um dies zu umgehen, müssen Sie die verwenden importieren Aussage anstelle von erfordern() in deinem postcssconfig.js Datei:

importieren cssnano aus„cssnano“
// Konfigurationscode kommt hierher

Solange Sie die Plugins installiert haben, funktioniert alles einwandfrei.

Erfahren Sie mehr über SaSS

PostCSS ist nur einer von Dutzenden derzeit verfügbaren CSS-Präprozessoren. Eines davon ist SaSS, was für syntaktisch tolle Stylesheets steht.

Als CSS-Entwickler kann es hilfreich sein, den Umgang mit einem anderen wichtigen Präprozessor zu erlernen.