CSS Evolution: Από CSS, SASS, BEM, CSS Modules σε Styled Components

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

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

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

CSS στην άγρια ​​δύση

Στη δεκαετία του '90 χρησιμοποιούμε την εστίαση στη δημιουργία "φανταχτερών" διεπαφών, ο παράγοντας wow ήταν το πιο σημαντικό πράγμα, τα inline styles ήταν το πράγμα τότε, απλά δεν μας νοιάζει αν τα πράγματα φαινόταν διαφορετικά, στο τέλος Οι ιστοσελίδες ήταν σαν χαριτωμένα παιχνίδια θα μπορούσαμε να πετάξουμε μερικές gifs, marquees και άλλα φρικτά (επί του παρόντος εντυπωσιακά) στοιχεία και να περιμένουμε να προσελκύσουμε την προσοχή των επισκεπτών σας.

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

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

SASS στη διάσωση

Το SASS μετασχημάτισε το CSS σε μια αξιοπρεπή γλώσσα προγραμματισμού, με τη μορφή μηχανής προεπεξεργασίας, η οποία υλοποίησε φωλιές, μεταβλητές, mixins, επέκταση και λογική σε φύλλα στυλ, ώστε να μπορείτε να οργανώσετε καλύτερα τα css αρχεία σας και να έχετε τουλάχιστον μερικούς τρόπους αποδόμησης των css κομμάτια σας σε μικρότερα αρχεία, κάτι που ήταν πολύ καλό τότε.

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

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

Μέχρι να έρθει η BEM ....

BEM και σκέψεις που βασίζονται σε συστατικά

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

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

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

Ας ρίξουμε μια ματιά στο συνοδευτικό css με κάποιο ψευδο κώδικα που θα μας επιτρέψει να το αναλύσουμε καλύτερα:

Εάν θέλετε να έχετε μια βαθιά γνώση του τρόπου λειτουργίας του BEM, σας συνιστώ να ρίξετε μια ματιά σε αυτό το άρθρο, που γράφτηκε από τον συνάδελφό μου και τον φίλο μου Andrei Popa.

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

Αλλά, ένα άλλο σύνολο προβλημάτων ήρθε μαζί:

  • Η επιλογή κλασσικού ονόματος έγινε ένα κουραστικό έργο
  • Το Markup έγινε φουσκωμένο με όλα αυτά τα μακρά ονόματα τάξεων
  • Χρειάστηκε να επεκτείνετε ρητά κάθε στοιχείο ui όποτε θέλετε να επαναχρησιμοποιήσετε
  • Η σήμανση έγινε άσκοπα σημασιολογική

Ενότητες CSS και τοπικό πεδίο εφαρμογής

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

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

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

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

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

Έτσι φαίνεται το τοπικό css:

Μπορείτε να δείτε ότι είναι απλώς το css, η κύρια διαφορά είναι ότι όλα τα classNames που προστίθενται με: τοπικά θα δημιουργούν ένα μοναδικό όνομα κλάσης που μοιάζει με αυτό:

.app-components-button -__ root - 3vvFf {}

Μπορείτε να ρυθμίσετε το παραγόμενο ident με την παράμετρο ερωτήματος localIdentName. Παράδειγμα: css-loader; localIdentName = [path] [name] --- [local] --- [hash: base64: 5] για ευκολότερη αποσφαλμάτωση.

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

Στυλισμένα συστατικά για την ανάμειξη css σε JS (πλήρως)

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

Αυτός ο παρακάτω κώδικας θα το εξηγήσει καλύτερα:

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

Τα στυλιζαρισμένα στοιχεία παρέχουν ένα πολύ απλό σχέδιο για επαναχρησιμοποίηση και πλήρη διαχωρισμό του UI από λειτουργικά και stateful στοιχεία. Δημιουργία ενός API που έχει πρόσβαση σε εγγενείς ετικέτες είτε στο πρόγραμμα περιήγησης ως HTML είτε σε Native χρησιμοποιώντας το React Native.

Αυτός είναι ο τρόπος με τον οποίο περνάτε προσαρμοσμένες στηρίγματα (ή τροποποιητές) σε ένα στοιχείο με στυλ:

Μπορείτε να δείτε ότι τα στηρίγματα ξαφνικά γίνονται οι τροποποιητές που κάθε ένα από τα συστατικά λαμβάνει και μπορούν να επεξεργαστούν για να παράγουν διαφορετικές γραμμές του css, τακτοποιημένα σωστά;

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

Core UI για να επαναχρησιμοποιηθεί ο καθένας

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

Ένα παράδειγμα εφαρμογής ενός τέτοιου στοιχείου που χρησιμοποιεί CSS Modules:

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

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

Επιτρέψτε μου να σας δείξω ένα παρόμοιο παράδειγμα μιας πλήρους εφαρμογής ενός κουμπιού χρησιμοποιώντας τα στυλ στοιχεία:

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

Μας επιτρέπει να ορίσουμε ένα API βάσης UI το οποίο μπορείτε να ανταλλάξετε κατά βούληση και να βεβαιωθείτε ότι όλα τα UI παραμένουν σταθερά σε όλη την εφαρμογή.

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

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

Δέκτες λήψεως

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

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

Θέση / Mixin σαν λειτουργικότητα

Στα στυλιζαρισμένα συστατικά μπορείτε να χρησιμοποιήσετε την πλήρη ισχύ της JS για να μπορέσετε να δημιουργήσετε λειτουργίες όχι μόνο ως δέκτες prop αλλά και ως τρόπος διαμοιρασμού κώδικα μεταξύ διαφορετικών εξαρτημάτων, εδώ είναι ένα παράδειγμα:

Στοιχεία διάταξης

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

Αυτά τα στοιχεία έχουν αποδειχθεί πολύ χρήσιμα, καθώς συχνά ορισμένοι προγραμματιστές (που δεν είναι αρκετά εξοικειωμένοι με τις τεχνικές τοποθέτησης του css) έχουν έναν σκληρό χρόνο να ρυθμίσουν τη δομή, εδώ είναι ένα παράδειγμα τέτοιων στοιχείων:

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

Βοηθητικά στοιχεία

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

Αυτοί είναι μερικοί από τους βοηθούς που έχω βρει αρκετά χρήσιμο μέχρι στιγμής:

Θέμα

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

Πλεονεκτήματα

  • Η πλήρης δύναμη της JS στα χέρια μας, που σημαίνει πλήρη επικοινωνία με το UI του στοιχείου.
  • Εξαλείφει την ανάγκη χαρτογράφησης στοιχείων και στυλ μέσω της χρήσης ενός className (αυτό γίνεται κάτω από την κουκούλα)
  • Μεγάλη εμπειρία ανάπτυξης μέχρι στιγμής, μειώνει το χρόνο που αφιερώνεται στην σκέψη για τα classNames και τη χαρτογράφηση τους στο στοιχείο.

Μειονεκτήματα

  • Ωστόσο, θα πρέπει να δοκιμάσετε στο φυσικό περιβάλλον
  • Κατασκευάστηκε για React
  • Σούπερ νέος
  • Οι δοκιμές πρέπει να γίνονται μέσω aria-labels ή χρησιμοποιώντας classNames

συμπέρασμα

Όποια και αν είναι η τεχνολογία που χρησιμοποιείτε αν είναι SASS, BEM, CSS Modules ή Styled Components, δεν υπάρχει υποκατάστατο για μια καλά καθορισμένη αρχιτεκτονική styling που καθιστά διαισθητικό για άλλους προγραμματιστές να συνεισφέρουν στην κωδική βάση σας χωρίς να σκέφτονται πάρα πολύ, σπάζοντας ή εισάγοντας νέα κινούμενα μέρη στο σύστημα.

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

Αν έχετε οποιεσδήποτε σκέψεις, απόψεις, συμβουλές ή οτιδήποτε παρακαλώ σχολιάστε παρακάτω, ή μη διστάσετε να επικοινωνήσετε μαζί μου μέσω twitter @ perezpriego7