Μάθετε EmotionJS κατά τη διάρκεια του πρωινού σας καφέ - είναι τόσο εύκολο.

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

Οι πόλεμοι CSS (ανακεφαλαίωση)

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

Απλό παλιό CSS

Αυτός είναι ο κλασικός και απλός τρόπος εφαρμογής του CSS. Αναφέρουμε ένα αρχείο CSS στο index.html μας και εφαρμόζεται στα αρχεία HTML μας με κλασικούς κανόνες CSS.

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

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

Προεπεξεργαστές CSS

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

Ενότητες CSS

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

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

Αυτή η προσέγγιση είναι τέλεια καθώς είναι πολύ εύκολο να επιτευχθεί απομόνωση CSS. Επίσης, είναι εύκολο να κατανοήσουμε ποιοι κανόνες CSS εφαρμόστηκαν στα στοιχεία HTML μας και από πού προέρχονται. Ήμουν μεγάλος υποστηρικτής αυτής της προσέγγισης - έως ότου κυκλοφόρησε το EmotionJS.

CSS-σε-JS

Αυτή η προσέγγιση προκαλεί την πρακτική της απομόνωσης του CSS σε αρχεία CSS. Μας επιτρέπει να δηλώσουμε τους κανόνες CSS στον κώδικα JavaScript ως αντικείμενα JS.

Μερικά πλαίσια όπως το Reactέχουν ενσωματωμένη υποστήριξη για αυτήν τη μέθοδο. Μερικές βιβλιοθήκες προέκυψαν από την ανάγκη παροχής μιας πιο απομονωμένης και επεκτάσιμης λύσης. Οι κορυφαίες βιβλιοθήκες είναι Styled Components και EmotionJS.

Ας το επεξεργαστούμε.

Στυλιστικά στοιχεία έναντι EmotionJS!

Τα Styled Components έφτασαν πρώτα, και το EmotionJS επηρεάστηκε σε μεγάλο βαθμό από αυτό.

Τα στιλ εξαρτήματα είναι απλά, μικρά συστατικά React. Ορίζουν μια ετικέτα HTML και τα στυλ της ως συνάρτηση των στηριγμάτων του στοιχείου.

Αυτό απομονώνει τη σημασιολογία HTML και CSS από τα πιο λειτουργικά συστατικά του React. Αυτό με τη σειρά του παρέχει μια πιο ευανάγνωστη και διατηρήσιμη εμπειρία ανάπτυξης.

Παράδειγμα στυλ εξαρτημάτων:

Αυτό που βλέπουμε εδώ είναι ένα κουμπί HTML με ορισμένα στηρίγματα CSS.

Οι ιδιότητες colorκαι backgroundCSS προσδιορίζονται ως συνάρτηση ενός primaryστηρίγματος που μεταφέρεται (ή όχι) στο στοιχείο.

Παρατηρήστε πώς το JSX είναι πολύ απλό και σημασιολογικό, και το τμήμα CSS και HTML είναι απομονωμένο στο στιλ στοιχείο.

Τώρα ας δούμε το EmotionJS.

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

Ας δείξουμε τα πράγματα που νόμιζα ότι ήταν πιο εντυπωσιακά με το EmotionJS.

Ένα πράγμα που μισούσα μέχρι τώρα ήταν η διατήρηση ερωτημάτων μέσων CSS.

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

Στο EmotionJS, μπορούμε να δημιουργήσουμε μια σταθερά κρατώντας τα πλάτη των σημείων διακοπής με τη βοήθεια της βιβλιοθήκης Facepaint.

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

Ας σπάσουμε αυτό το παράδειγμα:

  • Γραμμή 4-9: καθορίζουμε τα πλάτη των σημείων διακοπής, σε ένα σημείο στην εφαρμογή μας
  • Γραμμή 13–23: ορίζουμε ένα στοιχείο Button που είναι μια ετικέτα div με ορισμένες ιδιότητες CSS. Οι τιμές widthκαι οι heightτιμές ορίζονται ως μια σειρά τιμών, μία για κάθε σημείο διακοπής. Παρατηρήστε πώς δεν χρειάζεται να καθορίσουμε τις pxενότητες. Προστίθενται αυτόματα. Επίσης, παρατηρήστε ότι η background-colorιδιότητα εξαρτάται από το primaryστήριγμα που παρέχεται στο στοιχείο Button. Αυτό είναι παρόμοιο με το παράδειγμα των στοιχείων Styled.
  • Γραμμή 26–33: στο στοιχείο React, αναφερόμαστε στο κουμπί EmotionJS και το χρησιμοποιούμε ως ετικέτα JSX

Άλλα χαρακτηριστικά του EmotionJS

Το EmotionJS έχει μερικούς περισσότερους τρόπους για να επιτύχει μερικές από αυτές τις δυνατότητες:

  • Η υποστήριξη CSS - μπορούμε να παρέχουμε στα στοιχεία React μας ένα στήριγμα CSS που είναι ένα αντικείμενο JavaScript ή μια συμβολοσειρά που καθορίζει τις ιδιότητες CSS.
  • Τα ερωτήματα πολυμέσων μπορούν επίσης να στοχευτούν με την προσέγγιση CSS prop

Συμπερασματικά: το καλό, το κακό και το συναισθηματικό

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

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

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

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

Η ετυμηγορία

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

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

Μην ξεχάσετε να χειροκροτήσετε αν σας άρεσε αυτό και ακολουθήστε με στο Twitter: //twitter.com/shahar_taite