Όταν μαθαίνει κανείς τις αρχές του βασικού CSS, διδάσκεται να γράφει αρθρωτά, επαναχρησιμοποιήσιμα και περιγραφικά στυλ για να διασφαλίζεται η συντηρησιμότητα. Αλλά όταν οι προγραμματιστές εμπλέκονται με εφαρμογές του πραγματικού κόσμου, είναι συχνά αδύνατο να προστεθούν δυνατότητες διεπαφής χρήστη χωρίς διαρροή στυλ σε ανεπιθύμητες περιοχές. Αυτό το ζήτημα συχνά μετατρέπεται σε έναν αυτοεκπληρούμενο βρόχο. τα στυλ που θεωρητικά καλύπτονται από ένα στοιχείο ή τάξη αρχίζουν να εμφανίζονται εκεί που δεν ανήκουν. Αυτό αναγκάζει τον προγραμματιστή να δημιουργήσει ακόμη πιο συγκεκριμένους επιλογείς για να παρακάμψουν τα στυλ που διέρρευσαν, τα οποία στη συνέχεια παρακάμπτουν κατά λάθος τα καθολικά στυλ κ.λπ. Οι άκαμπτες συμβάσεις ονομάτων κλάσης, όπως το BEM, είναι μια θεωρητική λύση σε αυτό το ζήτημα. Η μεθοδολογία BEM (Block, Element, Modifier) είναι ένας συστηματικός τρόπος ονομασίας κλάσεων CSS για να διασφαλιστεί η επαναχρησιμοποίηση και η δομή μέσα στα αρχεία CSS. Συμβάσεις ονομασίας όπως αυτή μπορούν να μειώσουν το γνωστικό φορτίο αξιοποιώντας τη γλώσσα τομέα για την περιγραφή των στοιχείων και της κατάστασής τους και, εάν εφαρμοστούν σωστά, μπορεί να διευκολύνει τη διατήρηση των στυλ για μεγάλες εφαρμογές. Στον πραγματικό κόσμο, ωστόσο, δεν λειτουργεί πάντα έτσι. Οι προτεραιότητες μπορούν να αλλάξουν, και με την αλλαγή, η εφαρμογή γίνεται ασυνεπής. Μικρές αλλαγές στη δομή HTML μπορεί να απαιτούν πολλές αναθεωρήσεις ονόματος κλάσης CSS. Με εξαιρετικά διαδραστικές εφαρμογές διεπαφής, τα ονόματα κλάσεων που ακολουθούν το μοτίβο BEM μπορεί να γίνουν μεγάλα και δυσκίνητα (π.χ. app-user-overview__status--is-authenticating) και η μη πλήρης τήρηση των κανόνων ονομασίας σπάει τη δομή του συστήματος, αναιρώντας έτσι τα πλεονεκτήματά του. Δεδομένων αυτών των προκλήσεων, δεν είναι περίεργο που οι προγραμματιστές έχουν στραφεί σε πλαίσια, καθώς το Tailwind είναι το πιο δημοφιλές πλαίσιο CSS. Αντί να προσπαθείτε να πολεμήσετε αυτό που μοιάζει με έναν πόλεμο ιδιαιτεροτήτων που δεν κερδίζεται μεταξύ των στυλ, είναι πιο εύκολο να εγκαταλείψετε το CSS Cascade και να χρησιμοποιήσετε εργαλεία που εγγυώνται πλήρη απομόνωση. Οι προγραμματιστές βασίζονται περισσότερο στα βοηθητικά προγράμματα Πώς γνωρίζουμε ότι ορισμένοι προγραμματιστές επιθυμούν να αποφύγουν τα κλιμακωτά στυλ; Είναι η άνοδος των «μοντέρνων» εργαλείων front-end – όπως τα πλαίσια CSS-in-JS – σχεδιασμένα ειδικά για αυτόν τον σκοπό. Η εργασία με μεμονωμένα στυλ που είναι αυστηρά προσαρμοσμένα σε συγκεκριμένα στοιχεία μπορεί να φαίνεται σαν μια ανάσα φρέσκου αέρα. Καταργεί την ανάγκη να ονομάσουμε πράγματα - εξακολουθεί να είναι μια από τις πιο μισητές και χρονοβόρες εργασίες στο front-end - και επιτρέπει στους προγραμματιστές να είναι παραγωγικοί χωρίς να κατανοούν πλήρως ή να αξιοποιούν τα οφέλη της κληρονομικότητας CSS. Αλλά το να χάσεις το CSS Cascade έρχεται με τα δικά του προβλήματα. Για παράδειγμα, η σύνθεση στυλ σε JavaScript απαιτεί βαριές διαμορφώσεις κατασκευής και συχνά οδηγεί σε αδέξια ανάμειξη στυλ με σήμανση στοιχείων ή HTML. Αντί για προσεκτικά μελετημένες συμβάσεις ονομασίας, επιτρέπουμε τα εργαλεία κατασκευής να δημιουργούν αυτόματα επιλογείς και αναγνωριστικά για εμάς (π.χ. .jsx-3130221066), απαιτώντας από τους προγραμματιστές να συμβαδίζουν με μια ακόμη ψευδογλώσσα από μόνη της. (Σαν να μην ήταν ήδη αρκετό το γνωστικό φορτίο της κατανόησης του τι κάνουν όλα τα UseEffects του συστατικού σας!) Η περαιτέρω αφαίρεση της δουλειάς της ονομασίας κλάσεων σε εργαλεία σημαίνει ότι ο βασικός εντοπισμός σφαλμάτων συχνά περιορίζεται σε συγκεκριμένες εκδόσεις εφαρμογών που έχουν μεταγλωττιστεί για ανάπτυξη, αντί να αξιοποιούνται οι εγγενείς λειτουργίες του προγράμματος περιήγησης που υποστηρίζουν ζωντανό εντοπισμό σφαλμάτων, όπως τα Εργαλεία προγραμματιστή. Είναι σχεδόν σαν να χρειάζεται να αναπτύξουμε εργαλεία για τον εντοπισμό σφαλμάτων των εργαλείων που χρησιμοποιούμε για να αφαιρέσουμε αυτά που ήδη παρέχει ο ιστός — και όλα αυτά για να ξεφύγουμε από τον «πόνο» της σύνταξης τυπικού CSS. Ευτυχώς, οι σύγχρονες δυνατότητες CSS όχι μόνο κάνουν πιο ευέλικτη τη σύνταξη τυπικών CSS, αλλά και δίνουν σε προγραμματιστές σαν εμάς πολύ περισσότερη δύναμη να διαχειρίζονται τον καταρράκτη και να το κάνουν να λειτουργεί για εμάς. Τα CSS Cascade Layers είναι ένα εξαιρετικό παράδειγμα, αλλά υπάρχει ένα άλλο χαρακτηριστικό που τραβάει μια εκπληκτική έλλειψη προσοχής — αν και αυτό αλλάζει τώρα που πρόσφατα έγινε συμβατό με τη γραμμή βάσης. Το CSS @scope At-Rule Θεωρώ ότι το CSS @scope at-rule είναι μια πιθανή θεραπεία για το άγχος που προκαλείται από διαρροές στυλ που καλύψαμε, κάτι που δεν μας αναγκάζει να διακυβεύσουμε τα πλεονεκτήματα του εγγενούς ιστού για αφαιρέσεις και πρόσθετα εργαλεία κατασκευής. "Το @scope CSS at-rule σάς δίνει τη δυνατότητα να επιλέξετε στοιχεία σε συγκεκριμένα υποδέντρα DOM, στοχεύοντας στοιχεία με ακρίβεια χωρίς να γράφετε υπερβολικά συγκεκριμένους επιλογείς που είναι δύσκολο να παρακαμφθούν και χωρίς να συνδέετε τους επιλογείς σας πολύ στενά με τη δομή DOM."— MDN.
Με άλλα λόγια, μπορούμε να δουλέψουμε με μεμονωμένα στυλ σε συγκεκριμένες περιπτώσεις χωρίς να θυσιάσουμε την κληρονομικότητα, τη διαδοχή ή ακόμα και τον βασικό διαχωρισμό των ανησυχιώνπου ήταν μια μακροχρόνια κατευθυντήρια αρχή της ανάπτυξης του front-end. Επιπλέον, έχει εξαιρετική κάλυψη του προγράμματος περιήγησης. Στην πραγματικότητα, ο Firefox 146 πρόσθεσε υποστήριξη για το @scope τον Δεκέμβριο, καθιστώντας το συμβατό με το Baseline για πρώτη φορά. Ακολουθεί μια απλή σύγκριση μεταξύ ενός κουμπιού που χρησιμοποιεί το μοτίβο BEM έναντι του κανόνα @scope:
<στυλ> .button .button__text { /* στυλ κειμένου κουμπιού */ } .button .button__icon { /* στυλ εικονιδίων κουμπιού */ } .button--primary { main button styles */ }
<στυλ> @scope (.primary-button) { span:first-child { /* στυλ κειμένου κουμπιού */ } span:last-child { /* στυλ εικονιδίων κουμπιού */ } }
Ο κανόνας @scope επιτρέπει την ακρίβεια με λιγότερη πολυπλοκότητα. Ο προγραμματιστής δεν χρειάζεται πλέον να δημιουργεί όρια χρησιμοποιώντας ονόματα κλάσεων, κάτι που, με τη σειρά του, του επιτρέπει να γράψει επιλογείς βασισμένους σε εγγενή στοιχεία HTML, εξαλείφοντας έτσι την ανάγκη για καθοριστικά μοτίβα ονομάτων κλάσεων CSS. Καταργώντας απλώς την ανάγκη για διαχείριση ονόματος κλάσης, το @scope μπορεί να μετριάσει τον φόβο που σχετίζεται με το CSS σε μεγάλα έργα. Βασική χρήση Για να ξεκινήσετε, προσθέστε τον κανόνα @scope στο CSS σας και εισαγάγετε έναν ριζικό επιλογέα στον οποίο θα καλύπτονται τα στυλ: @scope (<επιλογέας>) { /* Στυλ με εύρος στον <επιλογέα> */ }
Έτσι, για παράδειγμα, εάν επρόκειτο να προσανατολίσουμε τα στυλ σε ένα στοιχείο
@scope (nav) { a { /* Στυλ συνδέσμων εντός του εύρους πλοήγησης */ }
a:active { /* Ενεργά στυλ συνδέσμων */ }
a:active::before { /* Ενεργός σύνδεσμος με ψευδοστοιχείο για επιπλέον στυλ */ }
@media (μέγιστο πλάτος: 768 εικονοστοιχεία) { a { /* Προσαρμογές απόκρισης */ } } }
Αυτό, από μόνο του, δεν είναι ένα πρωτοποριακό χαρακτηριστικό. Ωστόσο, ένα δεύτερο όρισμα μπορεί να προστεθεί στο εύρος για τη δημιουργία ενός κατώτερου ορίου, καθορίζοντας αποτελεσματικά τα σημεία έναρξης και τέλους του εύρους.
/* Οποιοδήποτε στοιχείο μέσα στο ul δεν θα έχει εφαρμοστεί τα στυλ */ @scope (nav) έως (ul) { ένα { μέγεθος γραμματοσειράς: 14 px; } }
Αυτή η πρακτική ονομάζεται εύρος ντόνατ και υπάρχουν πολλές προσεγγίσεις που θα μπορούσε κανείς να χρησιμοποιήσει, συμπεριλαμβανομένης μιας σειράς παρόμοιων, πολύ ειδικών επιλογέων συνδεδεμένων στενά με τη δομή DOM, ενός :not pseudo-selector ή αντιστοίχισης συγκεκριμένων ονομάτων κλάσεων σε στοιχεία μέσα στο
Συμπέρασμα Τα Utility-first πλαίσια CSS, όπως το Tailwind, λειτουργούν καλά για πρωτότυπα και μικρότερα έργα. Τα πλεονεκτήματά τους μειώνονται γρήγορα, ωστόσο, όταν χρησιμοποιούνται σε μεγαλύτερα έργα που περιλαμβάνουν περισσότερους από μερικούς προγραμματιστές. Η ανάπτυξη του front-end έχει γίνει ολοένα και πιο περίπλοκη τα τελευταία χρόνια και το CSS δεν αποτελεί εξαίρεση. Αν και ο κανόνας @scope δεν είναι μια λύση για όλα, μπορεί να μειώσει την ανάγκη για πολύπλοκα εργαλεία. Όταν χρησιμοποιείται στη θέση ή παράλληλα με τη στρατηγική ονομασία κλάσεων, το @scope μπορεί να κάνει ευκολότερη και πιο διασκεδαστική τη σύνταξη CSS με δυνατότητα συντήρησης. Περαιτέρω ανάγνωση
CSS @scope (MDN) “CSS @scope”, Juan Diego Rodríguez (CSS-Tricks) Σημειώσεις έκδοσης Firefox 146 (Firefox) Υποστήριξη προγράμματος περιήγησης (CanIUse) Δημοφιλή πλαίσια CSS (Κατάσταση CSS 2024) “The “C” στο CSS: Cascade”, Thomas Yip (CSS-Tricks) Εισαγωγή BEM (Λήψη BEM)
