Μέθοδοι Στυλιστικής React Components

Υπάρχουν πολλοί διαφορετικοί τρόποι στυλιστικής React components. Εδώ θα εξετάσουμε μερικές βασικές από αυτές.

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

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

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

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

Ο δεύτερος τρόπος - είναι η εφαρμογή CSS modules. Σε αυτήν την περίπτωση, ένα CSS module - είναι ένα τέτοιο αρχείο CSS, στο οποίο από προεπιλογή όλα τα ονόματα κλάσεων και κινούμενων εικόνων βρίσκονται σε τοπική εμβέλεια ορατότητας, δηλαδή είναι προσβάσιμα μόνο μέσα στο component που το χρησιμοποιεί.

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

Στα επόμενα μαθήματα, θα εξετάσουμε όλες τις παρουσιαζόμενες εδώ μεθόδους πιο αναλυτικά.