Πώς να χρησιμοποιήσετε το PostCSS για να καθαρίσετε το σχέδιο ιστού σας

Ας υποθέσουμε ότι μαθαίνετε για μια πολύ καλή δυνατότητα CSS, όπως η ένθεση. Αλλά όταν προχωρήσετε και το δοκιμάσετε, συνειδητοποιείτε ότι η υποστήριξη είναι τρομερή και θα περάσουν χρόνια για να μπορέσετε τελικά να τη χρησιμοποιήσετε. Αυτό ήταν ένα τεράστιο πρόβλημα στο CSS μέχρι την εισαγωγή προεπεξεργαστών όπως το PostCSS.

Μάθετε πώς το PostCSS σάς επιτρέπει να χρησιμοποιείτε το σύγχρονο και μελλοντικό CSS σήμερα κατά την ανάπτυξη. Θα μάθετε ακριβώς τι είναι το PostCSS, πώς μπορείτε να το χρησιμοποιήσετε και τον καλύτερο τρόπο για να επωφεληθείτε από τις δυνατότητές του.

Ρύθμιση του Έργου

Πλοηγηθείτε σε έναν κενό φάκελο, δημιουργήστε ένα αρχείο με το όνομα index.html και προσθέστε την ακόλουθη σήμανση HTML στο αρχείο:

html>
<htmllang="en">
<κεφάλι>
<Σύνδεσμοςσχετ="φύλλο στυλ"href="src/styles.css">
κεφάλι>
<σώμα>
<Π>ΠαράγραφοςΠ>
<div>Divdiv>
σώμα>
html>

Αυτό το έγγραφο HTML αποδίδει μια παράγραφο και στοιχείο. Εισάγει επίσης ένα αρχείο φύλλου στυλ με το όνομα στυλ.css που είναι μέσα στο src ντοσιέ. Δημιουργήστε το αρχείο στο src φάκελο και περιλαμβάνει τους ακόλουθους κανόνες στυλ CSS:

σώμαΠ {
χρώμα: πορτοκάλι;
}
σώμαdiv {
χρώμα: μπλε;
}
σώμα {
απεικόνιση: πλέγμα;
}

Αυτό το CSS διαμορφώνει το χρώμα και των δύο στοιχείων στη σελίδα και δημιουργεί μια διάταξη πλέγματος. Τα περισσότερα προγράμματα περιήγησης υποστηρίζουν την κανονική σύνταξη CSS όπως αυτή. Αλλά όταν έχετε το νου σας σε νεότερη σύνταξη, θα πρέπει να φέρετε το PostCSS.

Δημιουργία έργου Node.js και εγκατάσταση PostCSS

Με απλά λόγια, το PostCSS σάς επιτρέπει να μετατρέψετε το σύγχρονο CSS σε κάτι που τα περισσότερα προγράμματα περιήγησης μπορούν να κατανοήσουν. μια διαδικασία που είναι κοινώς γνωστή ως transpiling. Αυτό είναι τέλειο εάν θέλετε να δοκιμάσετε νέες, πειραματικές ή μη τυπικές ιδιότητες CSS στον κώδικά σας που ενδέχεται να μην υποστηρίζουν τα μεγάλα προγράμματα περιήγησης.

Το PostCSS προσφέρει επίσης ένα πλούσιο οικοσύστημα προσθηκών JavaScript που μπορείτε να εγκαταστήσετε για να ενεργοποιήσετε ορισμένες λειτουργίες, όπως ελαχιστοποίηση CSS, υποστήριξη χρωμάτων και υποστήριξη χρωματισμών.

Για να χρησιμοποιήσετε το PostCSS, το πρώτο πράγμα που πρέπει να κάνετε είναι να αρχικοποιήσετε ένα νέο έργο Node.js:

npm init -y

Αυτή η εντολή θα δημιουργήσει ένα αρχείο package.json που περιέχει τις προεπιλεγμένες τιμές για την εφαρμογή σας.

Στη συνέχεια, εγκαταστήστε το PostCSS και το PostCSS CLI. Το δεύτερο πακέτο σάς επιτρέπει να εκτελέσετε το PostCSS από τη γραμμή εντολών:

npm i --save-dev postcss postcss-cli

ο --save-dev Το flag εγκαθιστά και τα δύο πακέτα npm ως εξαρτήσεις dev? θα χρησιμοποιήσετε μόνο το PostCSS και τα πρόσθετά του για την επεξεργασία του κώδικα CSS κατά την ανάπτυξη.

Για να ξεκινήσετε να χρησιμοποιείτε το PostCSS μέσω του διεπαφή γραμμής εντολών, μπες στο δικό σου πακέτο.json αρχείο και δημιουργήστε το απλό κατασκευή: css εντολή για μεταγραφή με PostCSS:

"σενάρια": {
"build: css": "postcss src/styles.css --dir dest -w"
}

Αυτή η εντολή θα λάβει το γυμνό CSS σας (αποθηκευμένο σε src/styles.css), μετατοπίστε τον κώδικα και, στη συνέχεια, εξάγετε τον στο dest ντοσιέ. Τρέχοντας το npm κατασκευή: css Η εντολή δημιουργεί αυτόν τον φάκελο και τον συμπληρώνει με το στυλ.css αρχείο που περιέχει κώδικα αναγνώσιμο από το πρόγραμμα περιήγησης.

Όταν εισάγετε το CSS σας στο HTML, βεβαιωθείτε ότι κάνετε εισαγωγή από τον φάκελο προορισμού όπου μεταγλωττίζετε το CSS σας και όχι από τον φάκελο προέλευσης από τον οποίο μεταγλωττίζεται το PostCSS. Αυτό, στην περίπτωσή μας, είναι το απόσταση φάκελο, όχι το src ντοσιέ.

Εάν ανοίξετε τον ιστότοπό σας σε πρόγραμμα περιήγησης, θα δείτε ότι ο ιστότοπος εξακολουθεί να έχει πρόσβαση στο CSS. Κάθε φορά που κάνετε αλλαγές στο αρχείο προέλευσης, το PostCSS θα μεταγλωττίσει ξανά τον κώδικα και οι αλλαγές θα αντικατοπτρίζονται στην ιστοσελίδα.

Χρήση προσθηκών PostCSS

Υπάρχουν εκατοντάδες Προσθήκες PostCSS για την προσθήκη προθεμάτων, γραμμών, υποστήριξης νέας σύνταξης και δεκάδων άλλων χαρακτηριστικών στο PostCSS. Αφού εγκαταστήσετε ένα πρόσθετο PostCSS, το ενεργοποιείτε μέσα στο postcss.config.js αρχείο — ένα αρχείο JavaScript που μπορείτε να χρησιμοποιήσετε για να ρυθμίσετε όλες τις διαμορφώσεις για το PostCSS.

Εγκαταστήστε το cssnano Προσθήκη PostCSS με την ακόλουθη εντολή:

npm i --save-dev cssnano

Για άλλη μια φορά, χρειάζεται μόνο να αποθηκεύσετε αυτές τις εξαρτήσεις ως εξαρτήσεις dev. Ο λόγος είναι ότι όλα αυτά συμβαίνουν καθώς αναπτύσσεστε. Δεν χρειάζεστε το PostCSS ή οποιοδήποτε από τα πρόσθετά του αφού ωθήσετε τον ιστότοπο στην παραγωγή.

Για να χρησιμοποιήσετε το πρόσφατα εγκατεστημένο πρόσθετο cssnano, πρέπει να προσθέσετε τον ακόλουθο κώδικα μέσα στο postcss.config.js αρχείο:

συνθ cssnano = απαιτώ("cssnano")
μονάδα μέτρησης.εξαγωγές = {
 πρόσθετα: [
 cssnano({
 προκαθορισμένο: "προεπιλογές"
 })
 ]
}

Τώρα, αν επιστρέψετε στο τερματικό και εκτελέσετε ξανά την εντολή build, αυτό θα ελαχιστοποιήσει το CSS εξόδου (δηλαδή θα κάνει τον κώδικα όσο το δυνατόν μικρότερο). Έτσι, όταν πιέζετε σε έναν ιστότοπο έτοιμο για παραγωγή, θα κάνει το CSS σας όσο το δυνατόν μικρότερο.

Χρήση σύγχρονων χαρακτηριστικών όπως το Nesting

Ας υποθέσουμε ότι θέλετε να χρησιμοποιήσετε τη σύνταξη ένθεσης στο φύλλο στυλ σας, ώστε να αντικαταστήσετε το μπλοκ παραγράφου στο src/styles.css με αυτό:

σώμα {
 & Π {
χρώμα: πορτοκάλι;
 }
}

Αυτός ο κωδικός είναι ο ίδιος με την έκδοση στον κωδικό εκκίνησης. Αλλά αυτό θα προκαλέσει ένα σφάλμα επειδή η σύνταξη είναι πολύ νέα και τα περισσότερα προγράμματα περιήγησης ιστού δεν την υποστηρίζουν. Μπορείτε να ενεργοποιήσετε την υποστήριξη για αυτήν τη σύνταξη με το PostCSS εγκαθιστώντας το postcss-preset-env συνδέω.

Το πρόσθετο συγκεντρώνει μια δέσμη διαφορετικών προσθηκών για το χειρισμό του CSS με βάση το στάδιο που βρίσκεται. Το στάδιο 0 αντιπροσωπεύει τα εξαιρετικά πειραματικά χαρακτηριστικά που μπορεί να μην μπουν καν σε CSS. Ενώ, το στάδιο 4 αφορά χαρακτηριστικά γλώσσας που αποτελούν ήδη μέρος της προδιαγραφής CSS.

Από προεπιλογή, παρών-env χρησιμοποιεί χαρακτηριστικά του σταδίου 2 (που είναι πιο πιθανό να μετατραπούν σε CSS). Αλλά μπορείτε να αλλάξετε το στάδιο σε ό, τι θέλετε στο αρχείο ρυθμίσεων.

Για να εγκαταστήσετε το πρόσθετο, εκτελέστε την ακόλουθη εντολή:

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

Μετά στο δικό σου postcss.config.js αρχείο, πρέπει να εισαγάγετε το πρόσθετο και να το καταχωρήσετε:

συνθ cssnano = απαιτώ("cssnano")
συνθ postcssPresetEnv = απαιτώ("postcss-preset-env")
μονάδα μέτρησης.εξαγωγές = {
 πρόσθετα: [
 cssnano({
 προκαθορισμένο: "προεπιλογές"
 }),
 postcssPresetEnv({ στάδιο: 1})
 ]
}

Θα πρέπει να περάσετε μόνο το στάδιο του νέου κώδικα CSS που σκοπεύετε να χρησιμοποιήσετε. Σε αυτήν την περίπτωση, υποθέτουμε ότι το χαρακτηριστικό ένθεσης βρίσκεται στο στάδιο 1. Όταν εκτελείτε ξανά την εντολή build και ελέγξετε το πρόγραμμα περιήγησης, θα δείτε ότι έχει μεταγλωττίσει τον ένθετο κώδικα σε τυπικό CSS που μπορεί να κατανοήσει το πρόγραμμα περιήγησης.

Χρήση PostCSS με Frameworks

Η μη αυτόματη διαμόρφωση του PostCSS μπορεί να είναι λίγο επίπονη. Αυτός είναι ο λόγος για τον οποίο σχεδόν όλα τα σύγχρονα πλαίσια συνοδεύονται από εργαλεία ομαδοποίησης (π.χ. Vite, Snowpack και Parcel) και αυτά τα εργαλεία θα έχουν ενσωματωμένη υποστήριξη για το PostCSS. Και ακόμα κι αν δεν το κάνουν, η διαδικασία προσθήκης υποστήριξης PostCSS είναι απίστευτα εύκολη.

Να θυμάστε πάντα ότι το Vite και τα περισσότερα άλλα bundler χρησιμοποιούν Σύστημα μονάδας ES6, όχι CommonJS. Για να το ξεπεράσετε αυτό, πρέπει να χρησιμοποιήσετε το εισαγωγή δήλωση στη θέση του απαιτώ() στο δικό σου postcssconfig.js αρχείο:

εισαγωγή cssnano από"cssnano"
// Ο κώδικας διαμόρφωσης πηγαίνει εδώ

Εφόσον έχετε εγκαταστήσει τα πρόσθετα, όλα θα λειτουργούν μια χαρά.

Μάθετε περισσότερα για το SaSS

Το PostCSS είναι μόνο ένας από τους δεκάδες προεπεξεργαστές CSS που είναι διαθέσιμοι αυτήν τη στιγμή. Ένα από αυτά είναι το SaSS, το οποίο σημαίνει συντακτικά φοβερά φύλλα στυλ.

Η εκμάθηση χρήσης ενός άλλου σημαντικού προεπεξεργαστή μπορεί να είναι χρήσιμη ως προγραμματιστής CSS.