Χρήση επιπέδων Cascade CSS για τη διαχείριση προσαρμοσμένων στυλ σε ένα έργο Tailwind

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

Το αρχείο διαμόρφωσης Tailwind έχει ένα !important επιλογή που θα προστεθεί αυτόματα !important σε κάθε κατηγορία χρησιμότητας. Δεν υπάρχει τίποτα κακό στη χρήση !important με αυτόν τον τρόπο, αλλά σήμερα υπάρχουν καλύτεροι τρόποι χειρισμού της ιδιαιτερότητας. Χρησιμοποιώντας CSS Cascade Layers μπορούμε να αποφύγουμε τη βαριά προσέγγιση της χρήσης !important.

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

Πηγή Tailwind .css Το αρχείο συνήθως ξεκινάει κάπως έτσι:

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;

Ας ρίξουμε μια ματιά στο επίσημα έγγραφα Tailwind σχετικά με τις οδηγίες:

Οι οδηγίες είναι προσαρμοσμένοι κανόνες του Tailwind που μπορείτε να χρησιμοποιήσετε στο CSS σας και προσφέρουν ειδική λειτουργικότητα για έργα Tailwind CSS. Χρησιμοποιήστε το @tailwind οδηγία για την εισαγωγή Tailwind's base, components, utilities και variants στυλ στο CSS σας.

Στο αρχείο CSS εξόδου που δημιουργείται, η επαναφορά CSS του Tailwind — γνωστή ως Προ-πτήση — περιλαμβάνεται πρώτα ως μέρος των βασικών στυλ. Το υπόλοιπο του base αποτελείται από μεταβλητές CSS που απαιτούνται για να λειτουργήσει το Tailwind. components είναι ένα μέρος για να προσθέσετε τις δικές σας προσαρμοσμένες τάξεις. Οποιεσδήποτε κατηγορίες βοηθητικών προγραμμάτων έχετε χρησιμοποιήσει στη σήμανση θα εμφανιστούν στη συνέχεια. Οι παραλλαγές είναι στυλ για πράγματα όπως καταστάσεις τοποθέτησης και εστίασης και στυλ απόκρισης, τα οποία θα εμφανίζονται τελευταία στο αρχείο CSS που δημιουργείται.

Ο ουραίος άνεμος @layer Οδηγιών

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

Για παράδειγμα, για να προσθέσετε τα δικά σας στυλ στο base στυλ, θα κάνατε τα εξής:

@layer base {
  h1 {
    font-size: 30px;
  }
}

Η components Το επίπεδο είναι κενό από προεπιλογή — είναι απλώς ένα μέρος για να τοποθετήσετε τις δικές σας τάξεις. Αν κάνατε τα πράγματα με τον τρόπο Tailwind, πιθανότατα θα το χρησιμοποιούσατε @apply (αν και ο δημιουργός του Tailwind πρόσφατα συμβουλεύτηκε εναντίον του), αλλά μπορείτε επίσης να γράφετε τάξεις με τον κανονικό τρόπο:

@layer components {
  .btn-blue {
    background-color: blue;
    color: white;
  }
}

Το πρότυπο CSS είναι πολύ πιο ισχυρό. Ας επιστρέψουμε σε αυτό…

Χρησιμοποιώντας το πρότυπο CSS @layer

Δείτε πώς μπορούμε να το ξαναγράψουμε για να χρησιμοποιήσουμε το πρότυπο CSS @layer:

@layer tailwind-base, my-custom-styles, tailwind-utilities;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind utilities;
  @tailwind variants;
} 

Σε αντίθεση με την οδηγία Tailwind, αυτά δεν καταργούνται. Γίνονται κατανοητά από το πρόγραμμα περιήγησης. Στην πραγματικότητα, τα DevTools στο Edge, στο Chrome, στο Safari και στον Firefox θα σας εμφανίσουν ακόμη και τα επίπεδα που έχετε ορίσει.

Μπορείτε να έχετε όσα επίπεδα θέλετε — και να τα ονομάσετε όπως θέλετε — αλλά σε αυτό το παράδειγμα, όλα τα προσαρμοσμένα στυλ μου είναι σε ένα μόνο επίπεδο (my-custom-styles). Η πρώτη γραμμή καθορίζει τη σειρά των επιπέδων:

@layer tailwind-base, my-custom-styles, tailwind-utilities;

Αυτό πρέπει να παρέχεται εκ των προτέρων. Φροντίστε να συμπεριλάβετε αυτήν τη γραμμή πριν από οποιονδήποτε άλλο κωδικό που χρησιμοποιεί @layer. Το πρώτο επίπεδο στη λίστα θα είναι το ελάχιστα ισχυρό και το τελευταίο επίπεδο στη λίστα θα είναι το πλέον ισχυρός. Αυτό σημαίνει tailwind-base είναι το λιγότερο ισχυρό επίπεδο και οποιοσδήποτε κωδικός σε αυτό θα παρακαμφθεί από όλα τα επόμενα επίπεδα. Αυτό σημαίνει επίσης tailwind-utilities θα υπερισχύει πάντα σε οποιοδήποτε άλλο στυλ — ανεξάρτητα από τη σειρά ή την ιδιαιτερότητα της πηγής. (Βοηθητικά προγράμματα και παραλλαγές θα μπορούσε να πηγαίνετε σε ξεχωριστά επίπεδα, αλλά οι συντηρητές του Tailwind θα διασφαλίσουν ότι οι παραλλαγές υπερτερούν πάντα των βοηθητικών προγραμμάτων, αρκεί να συμπεριλάβετε τις παραλλαγές κάτω από την οδηγία για τα βοηθητικά προγράμματα.)

Οτιδήποτε δεν είναι σε επίπεδο θα αντικαταστήσει οτιδήποτε βρίσκεται σε ένα επίπεδο (με μια εξαίρεση τα στυλ που χρησιμοποιούν !important). Έτσι, μπορείτε επίσης να επιλέξετε να φύγετε utilities και variants έξω από οποιοδήποτε στρώμα:

@layer tailwind-base, tailwind-components, my-custom-styles;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-components {
  @tailwind components;
}

@tailwind utilities;
@tailwind variants;

Τι πραγματικά μας αγόρασε αυτό; Υπάρχουν πολλές φορές που οι προηγμένοι επιλογείς CSS είναι αρκετά βολικοί. Ας δημιουργήσουμε μια έκδοση του :focus-within που ανταποκρίνεται μόνο στην εστίαση του πληκτρολογίου και όχι στα κλικ του ποντικιού χρησιμοποιώντας το :has επιλογέας (που προσγειώνεται στο Chrome 105). Αυτό θα διαμορφώσει ένα γονικό στοιχείο όταν κάποιο από τα παιδιά του εστιάζει. Παρουσιάστηκε το Tailwind 3.1 προσαρμοσμένες παραλλαγές - π.χ <div class="[&:has(:focus-visible)]:outline-red-600"> — αλλά μερικές φορές είναι πιο εύκολο να γράψετε απλώς CSS:

@layer tailwind-base, my-custom-styles;
@layer tailwind-base {
  @tailwind base;
}

@tailwind utilities;

@layer my-custom-styles {
  .radio-container {
    padding: 4px 24px;
    border: solid 2px rgb(230, 230, 230);
  }
  .radio-container:has(:focus-visible) {
    outline: solid 2px blue;
  }
}

Ας πούμε ότι σε μία μόνο περίπτωση θέλουμε να παρακάμψουμε το outline-color από blue σε κάτι άλλο. Ας υποθέσουμε ότι το στοιχείο με το οποίο εργαζόμαστε έχει και την κατηγορία Tailwind .outline-red-600 και το δικό μας .radio-container:has(:focus-visible) τάξη:

<div class="outline-red-600 radio-container"> ... </div>

Ποιες outline-color Θα κερδίσω?

Συνήθως, η υψηλότερη ειδικότητα του .radio-container:has(:focus-visible) θα σήμαινε ότι η κλάση Tailwind δεν έχει κανένα αποτέλεσμα — ακόμα κι αν είναι χαμηλότερη στη σειρά πηγής. Αλλά, σε αντίθεση με το Tailwind @layer οδηγία που βασίζεται στην παραγγελία πηγής, το πρότυπο CSS @layer υπερισχύει της ιδιαιτερότητας.

Ως αποτέλεσμα, μπορούμε να χρησιμοποιήσουμε σύνθετους επιλογείς στα δικά μας προσαρμοσμένα στυλ, αλλά και πάλι να τους παρακάμψουμε με τις τάξεις χρησιμότητας της Tailwind όταν χρειάζεται — χωρίς να χρειάζεται να καταφύγουμε σε βαριά !important χρήση για να πάρουμε αυτό που θέλουμε.