Με όλες τις τελευταίες συζητήσεις για την τελική χρήση του CSS Grid, με έριξε στο μυαλό: Τι άλλα εκπληκτικά χαρακτηριστικά CSS μπορώ να χρησιμοποιήσω τώρα; Μεταβλητές CSS ήταν αυτό που έφτασε στο νου.
Ήταν μια στιγμή από τότε που έχω ακούσει τίποτα σχετικά με τις μεταβλητές CSS και προσθέτει ένα εντελώς νέο σύνολο εργαλείων και τρόπο σκέψης στην ανάπτυξη του μπροστινού άκρου που με ενθουσιάζει.
Οι μεταβλητές CSS έχουν χτυπήσει εδώ και μερικά χρόνια, αλλά δεν φαίνεται να είναι σε ευρεία χρήση. Με τη δημοτικότητα των προ-επεξεργαστών όπως ο Sass, οι προγραμματιστές των frontend γκρέμισαν αυτή τη μεταβλητή φαγούρα εδώ και πολύ καιρό.
Ήμουν πρώτος ενθουσιασμένος από τις μεταβλητές CSS γύρω στο 2014 και από τότε έχω βυθιστεί μέσα και έξω από τη σφαίρα ενδιαφέρον μου. Τώρα σκέφτομαι να τα φέρω σε χώρους παραγωγής και θα σας δείξω πόσο απλό και εύκολο θα χρησιμοποιηθούν.
Η δήλωση της προσαρμοσμένης ιδιότητας είναι απλή: Πρέπει να δημιουργήσουμε μόνο την ιδιότητα που θέλουμε και να προσθέσουμε δύο παύλες στην αρχή της. Αυτά μπορούν να δηλωθούν οπουδήποτε, αλλά να τα προσθέσετε σε: ρίζα φαίνεται να είναι μια καλή προσέγγιση αυτή τη στιγμή.
--my-reusable-value: 20px;Η χρήση του ακινήτου είναι αρκετά απλή. Έχουμε πρόσβαση σε αυτό μέσω της var () λειτουργία και να χρησιμοποιήσουμε την ιδιότητα που δηλώσαμε παραπάνω.
padding: var(--my-reusable-value);Δεν είναι τόσο απλό και ένδοξο;
Οι μεταβλητές CSS είναι απλές για χρήση και είναι αρκετά εύκολο να θυμηθούν. Η μεγαλύτερη πρόκληση με μεταβλητές CSS (όπως συμβαίνει με τα περισσότερα CSS) είναι η γνώση του σωστού χρόνου και χώρου για τη χρήση τους. Το ρίχνοντάς τους τυχαία είναι ένας σίγουρος τρόπος φωτιάς για να δημιουργήσετε ένα χάος ενός φύλλου στυλ και με αυτές τις μεταβλητές που ρίχνονται στο σφάλμα θα γίνουν πιθανώς δυσκολότερες.
Θα πρέπει να λαμβάνονται υπόψη οι σωστές περιπτώσεις χρήσης και οι στρατηγικές για τη χρήση τους και εδώ θα πρέπει να επικεντρωθεί η πλειοψηφία των προσπαθειών σας.
Στο ακόλουθο παράδειγμα, θα σας παρουσιάσω ένα βασικό παράδειγμα του πώς δημιουργώ αυτήν τη στιγμή ένα στοιχείο που ανταποκρίνεται χρησιμοποιώντας μεταβλητές Sass. Τότε θα σας δείξω πώς θα μπορούσε να βελτιωθεί με μεταβλητές CSS με τρόπο που δεν είναι δυνατό με έναν προ-επεξεργαστή. Αυτή είναι μια συγκεκριμένη περίπτωση χρήσης που δεν ισχύει για κάθε τρόπο που χρησιμοποιούνται οι μεταβλητές, αλλά δείχνει πώς οι μεταβλητές CSS μπορούν να χρησιμοποιηθούν διαφορετικά.
Δείτε το στυλό Μεταβλητές CSS - περίπτωση απλής απόκρισης χωρίς μεταβλητές CSS από τον Adam Hughes ( @lostmybrain ) επί CodePen .
Όταν χρησιμοποιώ το Sass υπάρχουν μερικές διαφορετικές μεθοδολογίες που έχω δοκιμάσει. Η τρέχουσα μετάβαση στην έκδοση θέτει ερωτήματα μέσων εντός των μπλοκ CSS που θέλω να αλλάξω. Εδώ μπορώ να χρησιμοποιήσω ένα μεταβλητό, πρότυπο CSS, mixin ή μια επέκταση για να τροποποιήσω αυτό το στοιχείο χωρίς να σκεδάζω τα στυλ για το στοιχείο παντού.
Ένα πρόβλημα με αυτό είναι το γεγονός ότι έχουν πολλαπλά ερωτήματα μέσων και πολλές μεταβλητές που σχετίζονται με το είδος αλλά όχι. Θα μπορούσα να χρησιμοποιήσω χάρτες για τις μεταβλητές που θα έδιναν περισσότερη οργάνωση, αλλά νομίζω ότι το κύριο ζήτημα είναι ότι χρησιμοποιούμε πολλαπλές μεταβλητές για να ορίσουμε μια ιδιότητα. Αυτό απλά αισθάνεται λανθασμένο.
Οι μεταβλητές Sass χρησιμοποιούνται εκ των προτέρων, πράγμα που σημαίνει ότι πρέπει να σχεδιάσουμε κάθε τρόπο που θα τα χρησιμοποιήσουμε. Κάνουν την ανάπτυξη ευκολότερη αλλά τεχνικά δεν μας παρέχουν νέες υπερδυνάμεις.
Δείτε το στυλό Μεταβλητές CSS - απόκριση στη χρήση από τον Adam Hughes ( @lostmybrain ) επί CodePen .
Οι μεταβλητές CSS δεν χρειάζεται να δηλώνονται μπροστά, είναι δυναμικές. Αυτό είναι χρήσιμο με πολύ διαφορετικό τρόπο. Τώρα μπορούμε να αλλάξουμε υπό όρους μεταβλητές από οπουδήποτε και σε συγκεκριμένα περιβάλλοντα, όπως ερωτήματα μέσων.
Με την εξυπηρέτηση των στυλ ερωτημάτων των μέσων ενημέρωσης, μπορούμε να μειώσουμε το μέγεθος των ερωτημάτων των μέσων ενημέρωσης που είναι διάσπαρτα για να ανταποκρίνεται στο στυλ. Παρέχει επίσης έναν πολύ ωραίο και καθαρό τρόπο για να δείτε το γενικό διάστημα και το τυπογραφικό στυλ σε διαφορετικές μορφές.
Νομίζω ότι τα σχέδια που ανταποκρίνονται και τα θέματα είναι δύο εξαιρετικές περιπτώσεις χρήσης για μεταβλητές CSS, αλλά υπάρχουν τόσες πολλές δυνατότητες.
Οι μεταβλητές Sass και οι μεταβλητές CSS είναι δύο διαφορετικά θηρία, το καθένα με τα δικά τους pro και con.
Λόγω της δημοτικότητας του Sass και της πιο προγραμματιστικής φύσης του Sass, τα πιο διεξοδικά οργανωτικά πρότυπα έχουν εξελιχθεί με την πάροδο του χρόνου. Μου αρέσουν ιδιαίτερα οι χάρτες Sass και ο συνδυασμός παρόμοιων μεταβλητών τύπου στους χάρτες. Τα χρώματα, τα μεγέθη και οι συντομεύσεις για μονοπάτια φαίνεται να είναι δημοφιλείς επιλογές για να συμπεριληφθούν σε χάρτες.
Λόγω της σχετικά μικρότερης χρήσης μεταβλητών CSS, οι βέλτιστες πρακτικές δεν έχουν ακόμη εξελιχθεί. Οι χάρτες και οι πίνακες δεν είναι δυνατοί με τον ίδιο τρόπο στο CSS, έτσι ώστε αυτά τα νέα οργανωτικά πρότυπα θα πρέπει να καινοτομούν και να λύσουν τα προβλήματα με διαφορετικό τρόπο από τον Sass.
Οι μεταβλητές CSS χειρίζονται δυναμικά από το πρόγραμμα περιήγησης κατά το χρόνο εκτέλεσης ενώ οι Μεταβλητές Sass χρησιμοποιούνται όταν καταρτίζεται το CSS.
Αυτό είναι το βασικό σημείο πώλησης των μεταβλητών CSS για μένα. Θα είναι ενδιαφέρον να δούμε πώς οι άνθρωποι χρησιμοποιούν αυτή τη λειτουργία με την πάροδο του χρόνου και αν θα ανταποκριθεί στις δυνατότητές της.
Είμαι προσωπικά της άποψης ότι τα περισσότερα πράγματα που μπορούμε να καταργήσουμε από το Webpack , το Gulp και ό , τι-νέο-πλαίσιο-είναι-έξω-τώρα , τόσο το καλύτερο. Έχοντας ενδιαφέροντα νέα χαρακτηριστικά γνωρίσματα του προγράμματος περιήγησης σημαίνει ότι δεν χρειάζεται να βασιζόμαστε σε πλαίσια δημιουργίας και JavaScript για να κάνουμε τα πράγματα που οι προγραμματιστές θεωρούν απαραίτητες. Θα κινδύνευα να υποθέσω ότι ένα υψηλό ποσοστό προγραμματιστών frontend χρησιμοποιεί μερικές φορές τις μεταβλητές στο CSS τους, οπότε ο καθένας που χρησιμοποιεί αυτό το βασικό χαρακτηριστικό φαίνεται σαν ένα λογικό πράγμα που πρέπει να κάνει. Σημαίνει ένα λιγότερο πράγμα στο βήμα κατασκευής (το οποίο νομίζω ότι όλοι μπορούμε να συμφωνήσουμε να πάρει αρκετά τεράστιες αυτές τις μέρες) και περισσότερη συνέπεια στο διαδίκτυο.
Η υποστήριξη φαίνεται εξαιρετικά καλή με μια ξεκάθαρη εξαίρεση: IE 11. Τα περισσότερα σύγχρονα προγράμματα περιήγησης υποστηρίζουν CSS Variables with Edge με λίγα σφάλματα.
Στο 78,11% αυτό είναι υψηλότερο από το CSS Grid (κατά τη στιγμή της γραφής), αλλά ότι η υποστήριξη του IE11 θα μπορούσε να είναι ένα πρόβλημα.
Νομίζω ότι ο χρόνος είναι τώρα. Ότι η υποστήριξη IE11 δεν πρόκειται να βελτιωθεί, και γνωρίζουμε από προηγούμενες εκδόσεις των Windows ότι χρειάζεται πολύς χρόνος για να αναβαθμιστούν μερικοί. Όμως, η υποστήριξη σε σύγχρονα προγράμματα περιήγησης είναι μεγάλη, πράγμα που σημαίνει ότι θα πρέπει να κοιτάμε για μεταβλητές CSS και να δοκιμάζουμε τις δυνατότητες.
Αυτό δεν σημαίνει ότι δεν πρέπει να ξεχνάμε την ευθύνη μας για υποστήριξη παλαιότερων προγραμμάτων περιήγησης. Ένα βασικό σύστημα εναλλαγής που χρησιμοποιεί μια ετικέτα υποστήριξης ή ακόμα και ένα polyfill για παλαιότερα προγράμματα περιήγησης θα πρέπει να εξεταστεί, ακόμα περισσότερο εάν η πραγματική χρήση του ιστότοπού σας είναι πολύ πιο στρεβλωμένη σε παλαιότερα προγράμματα περιήγησης.
Είναι μια συναρπαστική στιγμή για την ανάπτυξη του μπροστινού άκρου και δεν μπορώ να περιμένω να χρησιμοποιώ περισσότερες από αυτές τις τεχνολογίες στους τόπους παραγωγής μου.