Post-επεξεργαστές CSS για αρχάριους συμβουλές και πόρους

Προεπεξεργασία CSS είναι μια έννοια που οι περισσότεροι προγραμματιστές έχουν ήδη μάθει ή έχουν διαβάσει. Καλύψαμε την προεπεξεργασία CSS με μεγάλη λεπτομέρεια για να βοηθήσουμε τους προγραμματιστές να επιταχυνθούν σε αυτή την επικρατούσα τεχνολογία. Αλλά τι γίνεται μετα-επεξεργαστές?

Αυτά τα σχετικά νέα εργαλεία είναι παρόμοια με την έννοια ότι αυτά επηρεάζουν τη ροή εργασιών ανάπτυξης ιστού, εντούτοις λειτουργούν με το άλλη πλευρά της ανάπτυξης του CSS (“Θέση” ανάπτυξη).

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

Δημοσίευση έναντι προεπεξεργασίας

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

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

Σε γενικές γραμμές, η προεπεξεργασία έχει τις δικές σας γλώσσες στυλ, όπως το Sass και το λιγότερο, αυτό μετατρέψτε σε καθαρό CSS. Η μετα-επεξεργασία λαμβάνει αυτό το βασικό CSS, και εφαρμόζει αυτοματοποίηση / επανάληψη.

Ακολουθεί ένα απόσπασμα από μια θέση η οποία είναι επίσης η πηγή της εικόνας παραπάνω. Νομίζω ότι ο συγγραφέας Stefan Baumgartner καταγράφει τη διαφορά με εξαιρετικό τρόπο.

Κατά κάποιο τρόπο, και τα δύο μοιάζουν με εργαλεία αυτοματισμού, που δουλεύουν με διάφορους τρόπους. Για παράδειγμα, ένας κοινός πόνος που επιλύεται με μετα-επεξεργασία είναι να αυτόματη προσάρτηση προθεμάτων για νεότερες ιδιότητες CSS3.

Αλλά αυτό μπορεί να γίνει και στο Sass με επεκτάσεις. Έτσι υπάρχει πραγματικά μια διαφορά? Ακολουθεί ένα άλλο μεγάλο απόσπασμα από την ίδια δημοσίευση:

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

Προσαρμόστε την μετα-επεξεργασία στη ροή εργασίας σας

Σχεδόν όλοι οι αναφορές PostCSS ως οριστική πηγή για την μεταγενέστερη επεξεργασία. Ωστόσο, η ομάδα του PostCSS έχει παραδεχτεί ανοιχτά στο Twitter στο αλλάζοντας τον τίτλο τους γιατί η λεηλασία δεν έχει νόημα πια.

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

Το PostCSS χρησιμοποιεί plugins JavaScript αυτοματοποιήστε τη ροή εργασίας σας CSS, και μπορείτε ακόμη να γράψετε το δικό σας plugin JS για να επεκτείνετε τη βιβλιοθήκη PostCSS. Εάν θέλετε να ξεκινήσετε με το PostCSS, δείτε αυτό το intro tutorial στο Smashing Magazine. Εάν χρησιμοποιείτε ήδη και κατανοείτε το Sass τότε θα πάρετε γρήγορα Post CSS.

Για να δημιουργήσετε τη δική σας ροή εργασίας προ / μετά CSS, ξεκινήστε από κάνοντας μια λίστα με τα σημεία πόνου σας, όπως:

• αυτόματη προεπιλογή κλίσεων CSS
• αυτόματη οργάνωση για τους κανόνες CSS
• προσθέτοντας polyfills για ορισμένες ιδιότητες
• δημιουργώντας διαστάσεις εικόνας για εικόνες φόντου

Σημειώστε ότι όλα αυτά τα πράγματα μπορούν να γίνουν τόσο στην προ- όσο και στην μετα-επεξεργασία. Είναι σημαντικό να συνειδητοποιήσουμε ότι η προ / μεταποίηση CSS σύντομα συγχωνεύεται για να γίνει ένα στο ίδιο πράγμα.

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

Τα καλύτερα εργαλεία μετά την επεξεργασία

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

Πείτε

Αν ήδη εργάζεστε με το Node.js, τότε η Pleeease φαίνεται σαν μια προφανής επιλογή. Έχει πολλά χαρακτηριστικά χαρακτηριστικά επεξεργασίας CSS, όπως η εισαγωγή αρχείων, μεταβλητών / λειτουργιών, αυτόματης εξομάλυνσης και υποστήριξης εφεδρείας για νεότερα στοιχεία όπως τα αρχεία SVG.

Ο ιστότοπος έχει επίσης ένα διαδραστική παιδική χαρά για όσους θέλουν να δοκιμάσουν τη βιβλιοθήκη στο διαδίκτυο χωρίς να κατεβάσουν ένα αντίγραφο τοπικά.

Ευλογώ

Θυμάμαι όταν ο Internet Explorer 6 ήταν ακόμα ενοχλητικός και είναι ωραίο να γνωρίζουμε ότι η ανάπτυξη του IE έχει βελτιωθεί - αλλά όχι πολύ. Ενώ θα ήθελα να σας πω ότι η χρήση του IE είναι ουσιαστικά εξαφανισμένη, αυτό απλά δεν φαίνεται να είναι αλήθεια.

Ευτυχώς, το Bless CSS είναι μια λύση που ανιχνεύει πιθανά προβλήματα που σχετίζονται με το IE στο CSS σας και δημιουργεί λύσεις με μετα-επεξεργασία. Λειτουργεί με το Node.js, έτσι ώστε να ταιριάζει καλά στην τυπική ροή εργασιών NPM / Gulp.

CSSNext

Εδώ είναι μια πραγματικά δροσερή βιβλιοθήκη που σας επιτρέπει να δημιουργία CSS με πιο προηγμένη λειτουργικότητα αυτή τη στιγμή δεν υποστηρίζεται. Η βιβλιοθήκη CSSNext περιλαμβάνει υποστήριξη για μονές λειτουργίες CSS4, όπως γκρί(), που επί του παρόντος υπάρχουν μόνο στα σχέδια του W3C.

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

Stylecow

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

Μπορείτε να κατεβάσετε το Stylecow από το GitHub, και έρχεται με κάποια απίστευτα λεπτομερή τεκμηρίωση.

-χωρίς προθέματα

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

Με αυτό το plugin δεν χρειάζεται καν να τρέξετε το CSS σας μέσω ενός μετα-επεξεργαστή στον υπολογιστή σας. Μπορεί επίσης να λειτουργήσει ως πρόγραμμα περιήγησης που συμπεριλαμβάνεται στον υπολογιστή του χρήστη αυτόματη ενημέρωση των αρχείων CSS.

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

Τυλίγοντας

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

Αν ψάχνετε για ακόμα περισσότερες πληροφορίες σχετικά με την μετα-επεξεργασία, ρίξτε μια ματιά σε αυτά τα σχετικά άρθρα:

• Τι θα μας σώσει από τη σκοτεινή πλευρά των προεπεξεργαστών CSS?
• Μια ματιά στο γράψιμο του μελλοντικού CSS με το PostCSS και το cssnext
• Προεπεξεργασία CSS (SASS ή λιγότερο) εναντίον CSS Postprocessing