CSS σε JavaScript: Το μέλλον του στοιχειωμένου στυλ

Εικόνα από @ jonathanzwhite

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

Για μια βαθιά κατάδυση στα προβλήματα που αντιμετωπίζει το CSS στη Javascript, ελέγξτε τη διάσημη παρουσίαση: Αντιδράστε με το CSS στο JS. Για μια μελέτη περίπτωσης σχετικά με τις βελτιώσεις απόδοσης που έχετε στην Αφροδίτη, μπορείτε να διαβάσετε το Inline CSS στην Ακαδημία Khan: Αφροδίτη. Αν θέλετε να μάθετε περισσότερα σχετικά με το CSS στις βέλτιστες πρακτικές JavaScript, ανατρέξτε στο styleguide του Airbnb.

Επιπλέον, θα χρησιμοποιήσουμε ενσωματωμένα στυλ JavaScript για την κατασκευή στοιχείων για την αντιμετώπιση μερικών από τις βασικές αρχές του σχεδιασμού που κάλυψα σε ένα από τα προηγούμενα άρθρα μου: Προτού να μπορέσετε να αποκτήσετε τον σχεδιασμό, πρέπει πρώτα να αποκτήσετε τις βασικές αρχές.

Ένα παραδειγματικό παράδειγμα

Ας ξεκινήσουμε με ένα απλό παράδειγμα: τη δημιουργία και το στυλ ενός κουμπιού.

Κανονικά το στοιχείο και τα σχετιζόμενα στυλ του πηγαίνουν στο ίδιο αρχείο: Button και ButtonStyles. Αυτό συμβαίνει επειδή εμπίπτουν στην ίδια ανησυχία: την άποψη. Ωστόσο, για αυτό το παράδειγμα, έσπασα τον κώδικα σε πολλαπλές ουρές για να το καταστήσω πιο εύπεπτο.

Εδώ είναι το στοιχείο κουμπιού:

Αυτό δεν είναι τίποτα απροσδόκητο - απλώς ένα στοιχείο ανυπέρβλητου React. Όταν η Αφροδίτη μπαίνει στο παιχνίδι, βρίσκεται στην ιδιότητα className. Η συνάρτηση css παίρνει ένα αντικείμενο στυλ και το μετατρέπει σε css. Το αντικείμενο στυλ δημιουργείται με τη λειτουργία του StyleSheet.create ({...}) της Aphrodite. Μπορείτε να δείτε την έξοδο του StyleSheet.create ({...}) με αυτή την παιδική χαρά της Αφροδίτης.

Εδώ είναι το φύλλο στυλ κουμπιών:

Ένα από τα πλεονεκτήματα της Αφροδίτης είναι ότι η μετανάστευση είναι απλή και η καμπύλη μάθησης είναι χαμηλή. Οι ιδιότητες όπως το border-radius become borderRadius και οι τιμές γίνονται string. Οι ψευδο-επιλογείς, τα ερωτήματα μέσων και οι ορισμοί των γραμματοσειρών λειτουργούν. Επιπλέον, τα προθέματα προμηθευτών προστίθενται αυτόματα.

Εδώ είναι το αποτέλεσμα:

Ένα από τα πλεονεκτήματα της Αφροδίτης είναι ότι η μετανάστευση είναι απλή και η καμπύλη μάθησης είναι χαμηλή.

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

Θεμελιώδης №1 -Τυπογραφία

Ας ξεκινήσουμε με την τυπογραφία, μια θεμελιώδη βάση για το σχεδιασμό. Το πρώτο βήμα είναι να ορίσουμε σταθερές τυπογραφίας. Και σε αντίθεση με το Sass ή Less, οι σταθερές για την Αφροδίτη μπορούν να μεταφερθούν σε ένα αρχείο JavaScript ή JSON.

Καθορίστε σταθερές τυπογραφίας

Κατά τη δημιουργία σταθερών, χρησιμοποιήστε σημασιολογικά ονόματα για τις μεταβλητές σας. Για παράδειγμα, αντί να ονομάσετε ένα από τα μεγέθη γραμματοσειράς σας h2, χρησιμοποιήστε ένα όνομα όπως το displayLarge που περιγράφει το ρόλο του. Ομοίως, για το βάρος των γραμματοσειρών, αντί να ονομάσετε ένα από τα βάρη σας 600, δώστε του ένα όνομα σαν semibold για να περιγράψετε την επίδρασή του.

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

Για περισσότερες πληροφορίες σχετικά με τον κάθετο ρυθμό, μπορείτε να διαβάσετε αυτό το άρθρο: Γιατί είναι ο Κάθετος Ρυθμός μια σημαντική πρακτική τυπογραφίας;

Χρησιμοποιήστε μια αριθμομηχανή για να καθορίσετε τα ύψη γραμμών

Υπάρχει μια επιστήμη πίσω από την επιλογή των τιμών για το ύψος γραμμής και τα μεγέθη γραμματοσειράς σας. Μπορούμε να χρησιμοποιήσουμε μαθηματικούς λόγους για να δημιουργήσουμε ένα σύνολο πιθανών υποψηφίων μεγέθους. Πριν από λίγες εβδομάδες, έγραψα ένα άρθρο που περιγράφει λεπτομερώς τη μεθοδολογία: Η τυπογραφία μπορεί να κάνει ή να σπάσει τον σχεδιασμό σας: μια διαδικασία για την επιλογή τύπου. Για τον προσδιορισμό των μεγεθών γραμματοσειρών, χρησιμοποιείτε την Αρθρωτή Κλίμακα. Για να καθορίσετε τα ύψη γραμμών, μπορείτε να χρησιμοποιήσετε αυτόν τον υπολογισμό κάθετου ρυθμού.

Ορίστε ένα στοιχείο κλάσης

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

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

Στο κάτω μέρος του αρχείου συστατικών, ορίζουμε το αντικείμενο στυλ μας. Εδώ χρησιμοποιούμε τις σταθερές τυπογραφίας.

Και έτσι θα χρησιμοποιηθεί το στοιχείο της επικεφαλίδας:

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

Θεμελιώδες №2 - Διάστημα

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

Καθορίστε σταθερές διαστήματος

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

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

Χρυσή αναλογία (1: 1.618)
8.0 χ (1.618 ^ 0) = 8.000
8,0 χ (1,618 ^ 1) = 12,94
8,0 χ (1,618 ^ 2) = 20,94
8,0 χ (1,618 ^ 3) = 33,89
8,0 χ (1,618 ^ 4) = 54,82
8,0 χ (1,618 ^ 5) = 88,71

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

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

Για παράδειγμα, ας προσθέσουμε ένα marginBottom στο στοιχείο Κουμπί.

Αυτό λειτουργεί στα περισσότερα σενάρια. Ωστόσο, τι συμβαίνει αν θέλουμε να αλλάξουμε την ιδιότητα marginBottom του κουμπιού βάσει του τόπου όπου βρίσκεται το κουμπί;

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

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

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

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

Σε μια τελική σημείωση, μπορείτε επίσης να χρησιμοποιήσετε τις σταθερές διαστήματος που ορίσατε ως παραγεμισμένα.

Χρησιμοποιώντας τις ίδιες σταθερές διαστήματος τόσο για τα περιθώρια όσο και για την επένδυση, μπορείτε να επιτύχετε μεγαλύτερη οπτική συνοχή στο σχέδιό σας.

Ακολουθεί το αποτέλεσμα:

Με τη χρήση σταθερών διαστήματος για τα περιθώρια και την επένδυσή σας, μπορείτε να επιτύχετε μεγαλύτερη οπτική συνοχή.

Τώρα που έχετε κατανοήσει το CSS στο JavaScript, βγείτε έξω και πειραματιστείτε. Δοκιμάστε να ενσωματώσετε τα ενσωματωμένα στυλ JavaScript στο επόμενο έργο σας. Νομίζω ότι θα εκτιμήσετε ότι θα μπορείτε να εργαστείτε σε ένα ενιαίο πλαίσιο για να χειριστείτε όλες τις ανησυχίες σας σχετικά με το στυλ και την άποψη.

Σχετικά με το θέμα του CSS και του JavaScript, ποιες είναι οι νέες εξελίξεις για τις οποίες είστε ενθουσιασμένοι; Προσωπικά είμαι ενθουσιασμένος για το async / αναμονή. Αφήστε μου μια σημείωση ή στείλτε μου ένα tweet στο Twitter.

Μπορείτε να με βρείτε στο Medium όπου δημοσιεύει κάθε εβδομάδα. Ή μπορείτε να ακολουθήσετε εμένα στο Twitter, όπου δημοσιεύω μη-αισθησιακή ramblings σχετικά με το σχεδιασμό, front-end ανάπτυξη, και την εικονική πραγματικότητα.

P.S. Εάν σας άρεσε αυτό το άρθρο, θα σήμαινε πολλά αν κάνατε κλικ στο και μοιραστήκατε με φίλους.