Συμμετέχω με τον Dustin Schau σε αυτό το βίντεο και θα με πάει σε μια περιοδεία στον κόσμο αυτού που έχει γίνει γνωστό ως CSS-in-JS. Δηλαδή, να κάνετε το στυλ σας εξ ολοκλήρου σε JavaScript, και όχι σε .cssαρχεία που έχετε στο μυαλό σας μόνοι σας.
Ο Dustin είναι ένας τέλειος οδηγός για αυτό, καθώς δημιούργησε ένα εξαιρετικό εξερευνητικό εργαλείο που ονομάζεται CSS στο JS Playground και έχει επίσης ένα ολοκαίνουργιο μάθημα για το θέμα.
Εάν είστε περίεργοι γιατί κάποιος θα ενδιαφερόταν να πάει καθόλου στη διαδρομή CSS-in-JS, ακολουθούν ορισμένοι λόγοι που συζητάμε στο βίντεο:
- Εξάλειψη κώδικα νεκρού. Τα μόνα στυλ που φορτώνονται είναι τα στυλ των εξαρτημάτων που χρησιμοποιούνται ανά πάσα στιγμή. Δεν υπάρχει αποστολή αχρησιμοποίητων στυλ. Όταν ένα στοιχείο πεθαίνει, το ίδιο κάνει και το στυλ του.
- Πεδίο. Η σύνταξη νέων στυλ δεν μπορεί να επηρεάσει οτιδήποτε άλλο σε άλλα μέρη του ιστότοπου, επομένως δεν χρειάζεται να ανησυχείτε για τη σύνταξη ενός στυλ που έχει κακές ή ακούσιες συνέπειες αλλού λόγω ενός επιλογέα στο παγκόσμιο πεδίο. Παίρνουμε προστασία πεδίου με ιδεολογίες ονομασίας όπως το BEM, αλλά δεν επιβάλλεται από εργαλεία.
- Ονομασία χωρίς ανησυχίες. Σε ορισμένες περιπτώσεις, δεν χρειάζεται να επιλέξετε όνομα κλάσης ή αναγνωριστικό για αυτό που έχει στυλ, καθώς η έξοδος περιέχει UI.
- Εργονομία προγραμματιστή. Μπορεί να είναι ωραίο να έχετε στυλ στο ίδιο αρχείο (ή διαφορετικά πολύ κοντά) στο ίδιο το στοιχείο. Με τον ίδιο τρόπο, ορισμένοι προγραμματιστές αισθάνονται πολύ άνετα στο JSX. Επίσης, το να μπορείς να σχεδιάσεις πράγματα χωρίς καμία ανησυχία σημαίνει ότι οι προγραμματιστές μπορεί να αισθάνονται εξουσιοδοτημένοι για το στυλ παρά να φοβούνται από αυτό.
- Φιλικό σύστημα σχεδιασμού. Τα συστήματα σχεδιασμού αφορούν όλα τα εξαρτήματα και το React. Αυτοί οι συμπληρωματικοί τρόποι σκέψης ευθυγραμμίζονται αρκετά μεταξύ τους.
- Δυνατότητες JavaScript σε CSS. Κάνοντας αυτό με λογικούς τελεστές και πέρασε σε τιμές και μαθηματικά και τίποτα άλλο, το να έχετε την πλήρη δύναμη της JavaScript σε στυλ είναι πολύ χρήσιμο.
Και δεν είναι όλα, αλλά μπορείτε να δείτε γιατί είναι συναρπαστικό για μερικούς ανθρώπους. Σίγουρα ενέπνευσε πολλές συζητήσεις. Γιατί όχι όταν προσφέρει όλα αυτά τα οφέλη; Λοιπόν, είναι ένα πολύ διαφορετικό περιβάλλον ανάπτυξης που δεν κάνει απαραίτητα κλικ σε όλους. Απαιτεί κάμψη της πλατφόρμας ιστού για να κάνει κάπως ασυνήθιστα πράγματα και αυτό έρχεται με κονδυλώματα. Για να μην αναφέρουμε υπάρχει ένα κυριολεκτικό κόστος σε αυτό (μέγεθος πακέτων και τέτοια) που πληρώνουν οι χρήστες, το οποίο καλύτερα να ελπίζουμε ότι πληρώνει με αποτελεσματικότητα.
Ο Dustin προχώρησε τόσο πολύ ώστε να δημιουργήσει μια επίδειξη χρησιμοποιώντας το Sass για να διαμορφώσει τα πράγματα για να το συγκρίνει με το πώς μπορεί να γίνει με το CSS-in-JS, το οποίο δείχνει πώς φαίνεται το στυλ μεταφοράς καθώς και τις δυνατότητες να το κάνει.