Πώς να αντιμετωπίσετε ζητήματα εξειδίκευσης CSS και πότε να χρησιμοποιήσετε τη λέξη-κλειδί!

Μελέτη περίπτωσης

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

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

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

Ειδικότητα CSS

Ορισμός

Η ειδικότητα περιγράφεται από τα Έγγραφα Ιστού MDN ως:

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

Κανόνες

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

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

nav a { color: green; } a { color: red; }

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

Θα ήθελα να επισημάνω εδώ ότι παρόλο που ! Το σημαντικό δεν είναι ένας επιλογέας CSS, είναι μια λέξη-κλειδί που χρησιμοποιείται για την παράκαμψη ενός κανόνα CSS ανεξάρτητα από την τιμή εξειδίκευσης, την προέλευση ή τη σειρά προέλευσης ενός επιλογέα CSS. Ορισμένες περιπτώσεις χρήσης περιλαμβάνουν:

  • Προσωρινές διορθώσεις (σαν να βάζετε κολλητική ταινία σε διαρροή σωλήνα)
  • Παράκαμψη ενσωματωμένου στυλ
  • Σκοποί δοκιμής / εντοπισμού σφαλμάτων

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

Αυτό μας φέρνει σε αυτό που θα κάνουμε σήμερα - διορθώνοντας τα ζητήματα ειδικότητας σε ένα έργο.

Η εργασία

Ένα μικρό υπόβαθρο σχετικά με το έργο που θα αναθεωρήσουμε - είναι μια σελίδα προορισμού εμπνευσμένη από το Netflix που χρησιμοποιεί το API του MovieDB.

Το φύλλο στυλ

Ο στόχος είναι να αφαιρεθεί η λέξη-κλειδί «! Σημαντικό» από τους κανόνες CSS στους οποίους έχει εφαρμοστεί επαναπροσδιορίζοντας τον κώδικα έτσι ώστε να ακολουθεί τους κανόνες ειδικότητας.

Παρακάτω, μπορείτε να δείτε το φύλλο στυλ για το έργο.

@import url("//fonts.googleapis.com/css?family=Montserrat:400,400i,700"); body { margin: 0; padding: 0; overflow-x: hidden; } .wrapper { width: 100%; } .wrapper #header { position: fixed; z-index: 300; padding: 15px; width: calc(100% - 30px); display: flex; justify-content: space-between; align-items: center; background: linear-gradient(to bottom, black 0%, transparent 100%); } .wrapper #header #brand-logo { color: #d32f2f; text-shadow: 1px 1px 2px black; letter-spacing: 5px; text-transform: uppercase; font-family: Montserrat; font-weight: bold; font-size: 22px; } .wrapper #header #menu-icon { display: none; } .wrapper #header .nav-link, .wrapper #header .icon { color: #bdbdbd; cursor: pointer; } .wrapper #header .nav-menu { width: 400px; display: flex; justify-content: space-around; align-items: center; } .wrapper #header .nav-link { padding: 5px 10px; font-size: 15px; font-family: century gothic; text-decoration: none; transition: background-color 0.2s ease-in; } .wrapper #header .nav-link:hover { color: #c62828; background-color: rgba(0, 0, 0, 0.7); } .wrapper #header .icon { font-size: 16px; } .wrapper #header .icon:hover { color: #c62828; } .wrapper #site-banner, .wrapper #categories { width: 100%; } .wrapper #site-banner { height: 550px; background-image: url("//s1.gifyu.com/images/rampage_2018-1024x576.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; } .wrapper #site-banner .main-movie-title, .wrapper #site-banner .watch-btn, .wrapper #site-banner .main-overview { position: absolute; z-index: 3; } .wrapper #site-banner .main-movie-title, .wrapper #site-banner .watch-btn { text-transform: uppercase; } .wrapper #site-banner .main-movie-title { top: 120px; left: 20px; background: -webkit-linear-gradient(#ff9100, #dd2c00); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 55px; font-family: Montserrat; font-weight: bold; } .wrapper #site-banner .main-overview { width: 400px; top: 230px; left: 25px; color: #fafafa; line-height: 25px; font-family: helvetica; } .wrapper #site-banner .watch-btn { width: 150px; height: 35px; top: 350px; left: 25px; border: none; border-radius: 20px; color: #fafafa; cursor: pointer; transition: all 0.2s ease-in; background-color: #ff0000; box-shadow: 1px 5px 15px #940000; } .wrapper #site-banner .watch-btn:hover { color: #F5F5F5; background-color: #940000; } .wrapper .after { position: relative; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); } .wrapper #categories { padding: 30px 0; display: flex; flex-direction: column; background: linear-gradient(to top, #090909 0%, #000000 100%); overflow: hidden; } .wrapper #categories .category { margin: 30px 0; } .wrapper #categories .category-header, .wrapper #categories .content { margin-left: 20px; color: #B0BEC5; font-family: helvetica; } .wrapper #categories .category-header { margin-bottom: 50px; font-weight: normal; letter-spacing: 5px; } .wrapper #categories .content { position: relative; right: 0; display: flex; justify-content: flex-start; transition: all 3s ease-in-out; } .wrapper #categories .movie { margin-right: 10px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; } .wrapper #categories .movie-img { transition: all 0.2s ease-in; } .wrapper #categories .movie-img:hover { -webkit-filter: contrast(1.1); filter: contrast(1.1); -webkit-transform: scale(1.05); transform: scale(1.05); cursor: pointer; } .wrapper #footer { width: 100%; height: 120px; background-color: #090909; display: flex; align-items: flex-end; justify-content: flex-start; } .wrapper #footer #copyright-label { margin-left: 20px; padding: 10px; color: rgba(255, 255, 255, 0.3); opacity: 0.7; letter-spacing: 2px; font-family: helvetica; font-size: 12px; } //Media Query @media (max-width: 750px) { .nav-menu { visibility: hidden; } #menu-icon { display: block !important; font-size: 22px; } .main-movie-title { font-size: 45px !important; } .main-overview { width: 350px !important; font-size: 14px !important; } .watch-btn { width: 130px !important; height: 25px !important; font-size: 13px; } .movie-img { width: 170px; } }

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

Λοιπόν, τι συμβαίνει όταν καταργούμε την ! Σημαντική λέξη-κλειδί από τους κανόνες CSS στους οποίους έχει εφαρμοστεί; Λοιπόν, δεν έχουμε πλέον μια «κάρτα ατού» που παρακάμπτει τους κανόνες CSS άλλων επιλογών CSS που στοχεύουν στο ίδιο στοιχείο HTML. Έτσι, το πρόγραμμα περιήγησης θα κοιτάξει το φύλλο στυλ για να δει εάν υπάρχουν κανόνες που έρχονται σε διένεξη CSS.

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

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

Τώρα που εντοπίσαμε το πρόβλημα, ας το επιδιορθώσουμε!

Πρώτα πρέπει να εντοπίσουμε τους αντίστοιχους επιλογείς CSS που ταιριάζουν με τους επιλογείς CSS στο ερώτημα πολυμέσων μας.

.wrapper #header #menu-icon { display: none; } .wrapper #site-banner .main-movie-title { ... font-size: 55px; ... } .wrapper #site-banner .main-overview { width: 400px; ... } .wrapper #site-banner .watch-btn { width: 150px; height: 35px; ... } @media (max-width: 750px) { #menu-icon { display: block !important; ... } .main-movie-title { font-size: 45px !important; } .main-overview { width: 350px !important; font-size: 14px !important; } .watch-btn { width: 130px !important; height: 25px !important; ... } }

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

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

Το τελικό αποτέλεσμα θα μοιάζει με αυτό:

.wrapper #header #menu-icon { display: none; } .wrapper #site-banner .main-movie-title { ... font-size: 55px; ... } .wrapper #site-banner .main-overview { width: 400px; ... } .wrapper #site-banner .watch-btn { width: 150px; height: 35px; ... } @media (max-width: 750px) { .wrapper #header #menu-icon { display: block; ... } .wrapper #site-banner .main-movie-title { font-size: 45px; } .wrapper #site-banner .main-overview { width: 350px; font-size: 14px; } .wrapper #site-banner .watch-btn { width: 130px; height: 25px; font-size: 13px; } }

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

συμπέρασμα

Τι μάθαμε λοιπόν;

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

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

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

Επιπρόσθετοι πόροι

  • Έγγραφα Web MDN
  • Batficity από τον Mandy Michael
  • CSS Specificity Wars από τον Andy Clarke
  • Οπτικοποίηση ειδικότητας από τον Francesco Schwarz.
  • Όταν χρησιμοποιείτε! Σημαντικό είναι η σωστή επιλογή από τον Chris Coyier

Μπορείτε να βρείτε το έργο στο οποίο εργαζόμαστε εδώ.

Ελπίζω να σας άρεσε αυτό το post! Αν το κάνατε, ❤️,; και μοιραστείτε! Μέχρι την επόμενη φορά! ✌️