Κορυφαία 5 εργαλεία CSS για προγραμματιστές και σχεδιαστές ιστοσελίδων

Το CSS έχει διανύσει πολύ δρόμο, αλλά το εργαλείο γύρω του δεν έχει φτάσει μέχρι τώρα.


Εάν πιστεύετε ότι το να γράφετε CSS είναι σαν να πολεμάτε τέρατα σε ένα tar pit, δεν είστε μόνοι. Ενώ το CSS είναι μια από τις πιο θεμελιώδεις τεχνολογίες που τροφοδοτούν τον Ιστό, δεν είναι μια σωστή γλώσσα προγραμματισμού ή καθεαυτό πλαίσιο. Ως αποτέλεσμα, μόλις το έργο σας αρχίσει να γίνεται πιο εμφανές, το ίδιο και το χάος – οι κανόνες επιλογής φαίνεται να είναι παντού και είναι δύσκολο να βρείτε πού είναι. καθώς συμπεριλαμβάνετε γραμματοσειρές, εξωτερικό CSS, JS και άλλα στοιχεία στις σελίδες σας, το τελικό μέγεθος του πακέτου φαίνεται να αυξάνεται από το χέρι και αναρωτιέστε πού χάθηκαν τα ιδανικά των γρήγορων, φιλικών προς το χρήστη front-end.

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

Το τρένο CSS έρχεται! Πάμε! �� ��

PostCSS

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

Ωστόσο, δεν είναι απλώς σύνταξη ζάχαρης που βασίζεται σε JavaScript μέσω του CSS. Το PostCSS περιτυλίγει πολλά ισχυρά πακέτα / δυνατότητες μαζί, με αποτέλεσμα μια πολύ πιο ευχάριστη και ευκολότερη ροή εργασίας κατά την αντιμετώπιση του CSS. Για παράδειγμα:

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

Νομίζω ότι δεν θα κάνω δικαιοσύνη στο PostCSS εάν δεν συμπεριλάβω το παράδειγμα πλέγματος. Ορίστε λοιπόν. Κάτι τόσο απλό όπως αυτό:

div {
χαμένη στήλη: 1/3
}

μετατρέπεται σε ένα πλήρες σύστημα CSS με σχεδόν όλες τις άκρες περιλαμβάνονται:

div {
πλάτος: υπολογισμός (99,9% * 1/3 –
(30 εικονοστοιχεία – 30 εικονοστοιχεία * 1/3));
}
div: nth-child (1n) {
float: αριστερά
margin-right: 30 εικονοστοιχεία;
σαφές: κανένα;
}
div: τελευταίο παιδί {
margin-right: 0;
}
div: nth-child (3n) {
margin-right: 0;
επιπλέουν: δεξιά;
}
div: nth-child (3n + 1) {
σαφές: και τα δύο?
}

Δεδομένου ότι είναι ένα πράγμα που βασίζεται σε JS, το PostCSS δεν είναι ακριβώς εύκολο να δημιουργηθεί, ειδικά αν είστε σχεδιαστής και δεν έχετε να κάνει πολύ με τις ενότητες, τα bundlers και τον κόσμο npm γενικά. Τούτου λεχθέντος, το δυναμικό για PostCSS στην εργασία σας είναι τεράστιο και δεν πρέπει να παραβλέπεται.

PurgeCSS

Αγαπάτε τη σύγχρονη ροή εργασίας που βασίζεται στο πλαίσιο frontend, αλλά είστε απογοητευμένοι που φέρνουν πάρα πολλές αποσκευές; Εάν ναι, το PurgeCSS είναι ο φίλος σας, τουλάχιστον όσον αφορά το CSS.

Για εκείνους που μπορεί να μην γνωρίζουν ποια είναι η μεγάλη υπόθεση: εδώ είναι μια γρήγορη μείωση. Όταν δημιουργείτε εφαρμογές μιας σελίδας χρησιμοποιώντας πλαίσια front-end όπως React, Angular, Vue κ.λπ., περνάτε από αυτό που ονομάζεται “διαδικασία κατασκευής”. Ουσιαστικά, κωδικοποιείτε όλα τα CSS, JS, SASS κ.λπ. σε ξεχωριστά αρχεία (οργανώνοντάς τα όπως βρίσκετε πιο διαισθητικά), αλλά μόλις τελειώσετε, πείτε στο bundler να “δημιουργήσει” το πράγμα. Αυτό που κάνει είναι να διαβάσετε όλο τον πηγαίο κώδικα που έχετε γράψει, να εφαρμόσετε διάφορα φίλτρα σε αυτό (ελαχιστοποίηση, συσκότιση / uglification κ.λπ.) και να εκτοξεύσετε την έξοδο σε μεμονωμένα αρχεία, συνήθως “app.js” για όλο το JavaScript και “App.css” για όλο το CSS. Αυτά τα αρχεία, μαζί με ένα κοκαλιάρικο “index.html”, είναι το μόνο που χρειάζεστε για να εκτελέσετε το front-end της εφαρμογής. Το μειονέκτημα είναι ότι αφού όλα περιλαμβάνονται σε αυτά τα τελικά αρχεία, το μέγεθός τους συχνά υπερβαίνει αυτό που επιτρέπεται για γρήγορο χρόνο απόκρισης. Για παράδειγμα, δεν είναι ασυνήθιστο να βλέπετε ένα “app.js” άνω των 500 KB!

Το PurgeCSS προστίθεται ως μέρος της ροής εργασίας του build και αποτρέπει τη μη δέσμευση CSS που δεν χρησιμοποιείται στο τελικό αποτέλεσμα. Μια τυπική περίπτωση χρήσης είναι το Bootstrap: είναι μια μεσαίου μεγέθους βιβλιοθήκη με πολλές κατηγορίες διεπαφής χρήστη για διαφορετικά στοιχεία. Εάν η εφαρμογή σας χρησιμοποιεί, ας πούμε, το 10% των τάξεων του Bootstrap, το υπόλοιπο 90% είναι το μόνο bloat στο τελικό αρχείο CSS. Αλλά χάρη στο PurgeCSS, τέτοια μη χρησιμοποιημένα αρχεία CSS μπορούν να εντοπιστούν και να αποτραπούν από τη διαδικασία δημιουργίας, με αποτέλεσμα πολύ μικρότερα τελικά αρχεία CSS (η μείωση μεγέθους 5-6 φορές είναι αρκετά φυσιολογική).

Λοιπόν, προχωρήστε, “καθαρίστε” περιττό CSS με PurgeCSS! ��

Ανεμος εκ των όπισθεν

Ανεμος εκ των όπισθεν είναι ένα πλαίσιο CSS, αλλά έρχεται σε αντίθεση με τον κόκκο που σκέφτηκα ότι θα το συμπεριλάβαμε εδώ μεταξύ των εργαλείων CSS. Εάν μισείτε το ενσωματωμένο CSS (ποιος δεν το κάνει;!), Το Tailwind πιθανότατα θα σας κάνει να ξεσηκωθείτε με τρόμο την πρώτη φορά που θα το συναντήσετε. Ας πάρουμε μια πρώτη γεύση κοιτάζοντας πώς μπορείτε να κωδικοποιήσετε μια τυπική φόρμα χρησιμοποιώντας το Tailwind CSS:

Όνομα χρήστη

Κωδικός πρόσβασης

Επιλέξτε έναν κωδικό πρόσβασης.

Συνδεθείτε


Ξεχάσατε τον κωδικό?

© 2019 Acme Corp. Με επιφύλαξη παντός δικαιώματος.

«Είναι αστείο ή τι ;! Ποια είναι όλα αυτά τα ενοχλητικά μικρά μαθήματα; Μετά από πιο προσεκτική επιθεώρηση, γιατί στο διάολο θέτω τα περιθώρια, την επένδυση και το χρώμα απευθείας μαζί με το HTML; Είναι αυτό το 2019 ή τι; “

Σκέψεις όπως αυτές αναμένονται. Το ξέρω γιατί ένιωσα το ίδιο και έκλεισα αμέσως το καπάκι στο Tailwind. Μόνο αργότερα συνάντησα ένα podcast όπου ο επισκέπτης είχε ξανακάνει έναν μοντέρνο ιστότοπο αξιοπρεπούς μεγέθους στο Tailwind που άρχισα να προσέχω.

Πριν προχωρήσουμε περαιτέρω, σκεφτείτε αυτές τις ερωτήσεις:

  • Έχετε κουραστεί να απομνημονεύετε τυπικές τάξεις πλαισίου και τις λειτουργίες τους, ώστε να μπορείτε να προσαρμόσετε τα σχέδιά σας σύμφωνα με τις προτιμήσεις σας; Ένα καλό παράδειγμα είναι η αλλαγή της εμφάνισης και της συμπεριφοράς της γραμμής πλοήγησης Bootstrap.
  • Πιστεύετε ότι τα δημοφιλή πλαίσια όπως το Bootstrap είναι υπερβολικά υπερβολικά και προσπαθούν να κάνουν πολύ περισσότερα από ό, τι θα έπρεπε?
  • Βρίσκεστε στον εαυτό σας ανάμιξη πλαισίων επειδή θέλετε το καλύτερο από όλους τους κόσμους?
  • Σας αρέσει να έχετε περισσότερο έλεγχο στα σχέδιά σας και να βρείτε την εμπειρία της βανίλιας CSS συντριπτική?

Εάν η απάντηση σε οποιοδήποτε από αυτά είναι «ναι», χρειάζεστε άσχημα το Tailwind. Ας ρίξουμε μια ματιά στο τι είναι το Tailwind και τι κάνει.

Το Tailwind είναι αυτό που ονομάζεται CSS πρώτου βοηθητικού προγράμματος, το οποίο διαφέρει από αυτό που κάνουμε στις καθημερινές ροές εργασίας μας: σημασιολογικό CSS. Η διαφορά μεταξύ σημασιολογικού CSS και βοηθητικού CSS είναι ότι το πρώτο προσπαθεί να ομαδοποιήσει στοιχεία στυλ με το όνομα των οπτικών ενοτήτων που εμφανίζονται στη σελίδα. Έτσι, εάν έχετε ένα μενού πλοήγησης, κάρτες, καρουσέλ κ.λπ., σε μια σελίδα, ο σημασιολογικός τρόπος να κάνετε πράγματα θα ήταν να ομαδοποιήσετε κανόνες στυλ CSS σε τάξεις όπως .nav, .card, .carousel κ.λπ., οι οποίοι τις υπο-ενότητες τους επισημαίνονται ανάλογα (για παράδειγμα, .card-body, .card-footer, κ.λπ.). Αυτή είναι μακράν η πιο κοινή προσέγγιση για το CSS και όλοι γνωρίζουμε μέσω πλαισίων όπως Bootstrap, Foundation, Bulma, UI Kit κ.λπ..

Από την άλλη πλευρά, το “βοηθητικό” στυλ γραφής ονομάτων κατηγοριών CSS ακριβώς σύμφωνα με τη λειτουργία τους: μια κλάση που ελέγχει το περιθώριο για την επάνω και την κάτω πλευρά θα ονομάζεται .margin-y-medium και μπορεί να εφαρμοστεί οπουδήποτε στον HTML σήμανση όπου απαιτείται αυτό το περιθώριο. Ενώ αυτό εισάγει κάπως μια ερμηνεία ονόματος τάξης (απλώς ρίξτε μια γρήγορη ματιά στον κώδικα που μοιράστηκα νωρίτερα ή στο στιγμιότυπο οθόνης – τόσα πολλά μαθήματα!), Η πρόθεση του CSS είναι ξεκάθαρη: δεν χρειάζεται να πηδήξετε μπρος-πίσω μεταξύ της τεκμηρίωσης, του CSS και του HTML σας για να μάθετε τα σωστά ονόματα και το σωστό εφέ.

Είναι ένας πολύ απελευθερωτικός τρόπος εργασίας, αλλά υπάρχει και ένα πλεονέκτημα: πρέπει να έχετε τα βασικά σας CSS σωστά (συμπεριλαμβανομένων των σύγχρονων ιδεών όπως το Flexbox). Αυτό οφείλεται στο γεγονός ότι το Tailwind δεν προσφέρει στυλ εκτός του πλαισίου για οποιαδήποτε στοιχεία στη σελίδα σας και εξαρτάται από εσάς να δημιουργήσετε τα στυλ από τα δομικά στοιχεία. Ένα άλλο πρόβλημα είναι αυτό της ρύθμισης: Το Tailwind σάς επιτρέπει να ομαδοποιήσετε πολλές κατηγορίες CSS σε αυτά που ονομάζονται συστατικά, αλλά γίνεται μέσω JavaScript και απαιτεί ένα πρόγραμμα φόρτωσης λειτουργικής μονάδας και bundler όπως το Webpack.

Όλα όσα έλεγαν και έκαναν, το Tailwind είναι ένας πολωτικός, εντυπωσιακός νέος τρόπος να κάνει το στυλ και θα προσελκύσει αυτούς που λαχταρούν για μεγαλύτερη απλότητα και έλεγχο.

Saas

Παρόλο Sass εδώ και πολύ καιρό, το έχω συμπεριλάβει εδώ επειδή οι προγραμματιστές δεν γνωρίζουν ακόμη πόσο χρήσιμο είναι. Το Stylistically Awesome Style Sheets (ή SASS) είναι ένα υπερσύνολο του CSS που αναπτύχθηκε για να εξημερώσει την τρέλα που σέρνεται στο έργο μόλις το CSS μεγαλώσει πέρα ​​από μερικές γραμμές.

Φανταστείτε αυτό: έχετε διανύσει πολύ δρόμο τη σύνταξη του CSS για το έργο σας. Χρησιμοποιείτε μερικά χρώματα, έχετε βρει κάποια λογικά περιθώρια για διάφορα div, στυλ γραμματοσειράς και ούτω καθεξής. Εκτός από το ότι τώρα συνειδητοποιείτε ότι δεν κολλάει τόσο καλά. Ίσως θέλετε να δοκιμάσετε μεγαλύτερα περιθώρια για όλες τις ενότητες, κάρτες και κουμπιά. Λοιπόν, τώρα τι; Ακόμη και η ίδια η ιδέα να πρέπει να κάνετε αναζήτηση-αντικατάσταση μέσω του τεράστιου αρχείου CSS σας αρκεί για να προκαλέσετε πονοκέφαλο. Όλοι το κάναμε και όλοι γνωρίζουμε πώς είναι επιρρεπές σε σφάλματα. Ο Sass λύνει αυτό το πρόβλημα εισάγοντας μεταβλητές:

Όταν γράφουμε HTML, τοποθετούμε στοιχεία μέσα σε άλλα στοιχεία. Αλλά όταν γράφουμε CSS, πρέπει να γράψουμε μια επίπεδη ιεραρχία κανόνων, κάτι που καθιστά δύσκολη τη διανοητική «προσαρμογή» του CSS στον HTML. Με το Sass, μπορείτε να μιμηθείτε τη δομή της σελίδας μέσα στα αρχεία στυλ σας:

Όλα αυτά δεν αρχίζουν ακόμη και να χαράζουν την επιφάνεια των προϊόντων που προσφέρει η Sass: αρθρωτή σχεδίαση, συμπεριλαμβανομένων αρχείων, mixins, κληρονομιάς. . . Η λίστα συνεχίζει και συνεχίζει. Σίγουρα, θα πρέπει να μάθετε μια ροή εργασιών μεταγλωττιστή Sass και να τη συμπεριλάβετε στη δική σας, αλλά κατά τη γνώμη μου, ότι οι δυο ώρες που δαπανώνται είναι μια επένδυση που θα σας πληρώνει ξανά και ξανά!

CSS Linters

Δεδομένου ότι οι σχεδιαστές ιστοσελίδων (και οι προγραμματιστές διεπαφής χρήστη – αν και αναρωτιέμαι πώς αυτοί οι δύο όροι είναι διαφορετικοί ��) χρησιμοποιούν απλούς επεξεργαστές κειμένου – ή όπως συμβαίνει αυτές τις μέρες, κωδικοποιήστε απευθείας από τα εργαλεία προγραμματιστή Chrome – σπάνια ακούγονται ή επωφελούνται από ένα χείλος. Από την άλλη πλευρά, οι προγραμματιστές που χρησιμοποιούν καλό πρόγραμμα επεξεργασίας κειμένου όπως VS Code, Sublime Text ή άλλα IDE γνωρίζουν αυτό το εργαλείο πολύ καλά, καθώς είναι δεύτερη φύση για αυτούς. Εν πάση περιπτώσει, το θέμα είναι, εάν είστε ένας από αυτούς τους προγραμματιστές CSS που πνίγονται σε ακατάστατο CSS, θα μπορούσατε να επωφεληθείτε από ένα linter.

Με απλά λόγια, ένα linter είναι ένα πρόγραμμα που ελέγχει τον κώδικά σας για σφάλματα και ασυνέπειες. Αυτό το κάνει με τη βοήθεια ενός συνόλου κανόνων που έχει για να καταλάβει τι είναι λάθος και τι είναι ασυνεπές. Τα καλά linters ενσωματώνονται με IDE και επεξεργαστές κώδικα και μπορούν να ρυθμιστούν ώστε να εκτελούνται κάθε φορά που αποθηκεύετε το αρχείο προέλευσης. Σας βοηθούν επίσης με έγχρωμες προεπισκοπήσεις, σφάλματα και αυτόματη συμπλήρωση καθώς συνθέτετε τα αρχεία CSS:

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

συμπέρασμα

Είμαι σίγουρος μέχρι τώρα, είστε πεπεισμένοι ότι η σύγχρονη ανάπτυξη CSS απέχει πολύ από την προσέγγιση του παρελθόντος. ��

Τούτου λεχθέντος, θα παραδεχτώ κάτι ξανά, ακόμα κι αν ακούγεται σαν σπασμένο ρεκόρ: ορισμένα από τα εργαλεία που έχω καλύψει σε αυτό το άρθρο δεν είναι εύκολο να ρυθμιστούν, ειδικά εάν δεν είστε φιλικοί με το οικοσύστημα npm . Αλλά προτού νιώσετε αηδιασμένοι και απομακρύνετε το πρόσωπό σας, πείτε μου αυτό: ήταν εύκολο το CSS όταν ήσασταν πρώτοι μάθηση το? Ήταν εύκολο να μάθεις να κεντράρεις ένα div, να κυριαρχήσεις στις αλλαγές της διάθεσης των float και ούτω καθεξής; Ομοίως, τα εργαλεία που περιέγραψα εδώ έχουν κάποια καμπύλη μάθησης, αλλά αξίζουν τον κόπο.

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Комментариев нет, будьте первым кто его оставит

    Комментарии закрыты.

    Adblock
    detector