Εάν σχεδιάζετε να χρησιμοποιείτε το CSS σε τακτική βάση, πρέπει να αναπτύξετε μια κατανόηση της ιδιαιτερότητας και του τρόπου εφαρμογής του.
Εκτός από τα πλωτά και τις θέσεις, η εξειδίκευση μπορεί να είναι ένα από τα πιο δύσκολα πράγματα για να συνηθίσετε, πόσο μάλλον να κυριαρχεί. Οι επιλογείς που χρησιμοποιείτε στο CSS σας έχουν όλα διαφορετικά βάρη και αυτά ελέγχονται από την εξειδίκευση. Γι 'αυτό μερικές φορές, όταν εφαρμόζετε έναν κανόνα σε ένα στοιχείο, δεν αντανακλάται στο σχέδιό σας.
Αν έχετε ποτέ βασιστεί στην επικίνδυνη! Σημαντική λέξη-κλειδί για να χάσετε το CSS σας, τότε αυτό το άρθρο είναι για σας.
Για να αποκτήσετε σταθερά τα θεμέλιά σας, πρέπει να ξέρετε πώς το πρόγραμμα περιήγησης διαβάζει το CSS και πώς παρακάμπτονται οι κανόνες.
Πρώτον, το πρόγραμμα περιήγησης θα διαβάσει ένα φύλλο στυλ από πάνω προς τα κάτω, πράγμα που σημαίνει ότι με αυτόν τον κώδικα:
/*Line 10*/ul li a {color: red;}/*Line 90*/ul li a {color: blue;}Ο κανόνας που καθορίσατε στη γραμμή 10 θα αντικατασταθεί και η ετικέτα αγκύρωσης θα είναι μπλε, επειδή το πρόγραμμα περιήγησης θα εξετάσει τους κανόνες που ακολουθούν το CSS σας για να διατηρήσει μεγαλύτερη προτεραιότητα.
Αυτό λειτουργεί επίσης με την πραγματική σειρά εισαγωγής των αρχείων css, για παράδειγμα:
Εφόσον τοποθετήσατε το custom.css μετά από το style.css οτιδήποτε γράφετε στο style.css (η προεξόφληση προς το παρόν, το βάρος των επιλογέων) θα ξεπεραστεί και θα αντικατασταθεί αυτό που υπάρχει στο custom.css, αυτή η τεχνική χρησιμοποιείται συχνά από τους δημιουργούς θεμάτων για να δώσουν στο χρήστη κάποιο περιθώριο να προσθέσει το δικό του στυλ χωρίς να αλλάξει το κύριο αρχείο. (Σημειώστε όμως ότι το custom.css δεν αντικαθιστά εντελώς το style.css, θα αντικατασταθούν μόνο εκείνοι οι κανόνες που έχουν ξεπεραστεί ειδικά)
Όλα τα παραπάνω ισχύουν μόνο αν χρησιμοποιείτε το ίδιο βάρος σε κάθε επιλογέα. Εάν καθορίζετε αναγνωριστικά, κλάσεις ή στοιχεία στοίβαξης, τότε τους δίνετε βάρος, και αυτό είναι εξειδίκευση.
Υπάρχουν τέσσερις κατηγορίες που καθορίζουν το επίπεδο ειδικότητας ενός επιλογέα: γραμμικά στυλ (αυτά χρησιμοποιούνται μερικές φορές από javascript), αναγνωριστικά, κλάσεις και στοιχεία. Πώς να μετρήσετε την ιδιαιτερότητα; Η ειδικότητα μετράται σε σημεία, με την υψηλότερη τιμή σημείων να εφαρμόζεται.
Γνωρίζοντας αυτό, αν χρησιμοποιήσετε έναν επιλογέα όπως αυτό:
#content .sidebar .module li aΤο συνολικό βάρος του είναι 122 πόντοι (100 + 10 + 10 + 1 +1), το οποίο είναι ένα ID, δύο κατηγορίες και δύο στοιχεία.
ul li a {color: red;}Αυτός ο επιλογέας θα κρατήσει βάρος 3, πράγμα που σημαίνει ότι προσθέτοντας μια κλάση κάπου αλλού, μπορείτε να το αντικαταστήσετε.
.content #sidebar {width: 30%;}Αυτός ο επιλογέας έχει βάρος 110 μονάδων κυρίως λόγω του αναγνωριστικού που προσθέτει 100 σημεία από τα 110 συνολικά.
.post p:first-letter {font-size: 16px;}Αυτός ο επιλογέας έχει βάρος 12 βαθμών, δεδομένου ότι το ψευδο-στοιχείο: το πρώτο γράμμα ζυγίζει μόνο ένα σημείο και το ίδιο κάνει και η ετικέτα p.
p {font-family: Helvetica, arial, sans-serif;}Αυτός ο επιλογέας ζυγίζει μόνο 1 σημείο, αυτός ο τύπος επιλογέα θα πρέπει να χρησιμοποιείται στο επάνω μέρος της σελίδας όταν σημειώνετε τα βασικά στυλ που αργότερα μπορεί να αντικατασταθούν για συγκεκριμένες περιοχές.
Πάντα να έχετε κατά νου ότι για να αντικαταστήσετε έναν επιλογέα ταυτότητας θα πρέπει να γράψετε 256 κλάσεις για το ίδιο στοιχείο, όπως έτσι:
#title {font-weight: bold;}.home .page .content .main .posts .post .post-content .headline-area .wrapper /* ... etc. ... */ .title {font-weight: normal;}Μόνο με αυτόν τον τρόπο ο δεύτερος επιλογέας θα κτυπήσει τη δεύτερη χρησιμοποιώντας το αναγνωριστικό.
Η ιδιαιτερότητα δεν είναι μια φανταχτερή πτυχή του CSS, αλλά κατά τη γνώμη μου είναι η περιοχή που παραβλέπεται περισσότερο. Η επίτευξη της ιδιαιτερότητάς σας όχι μόνο σας βοηθά να αποφύγετε σφάλματα, αλλά θα επιταχύνει τόσο την εξέλιξη όσο και τον τελικό σας ιστότοπο.
Χρησιμοποιείτε κατάχρηση ταυτότητας όταν γράφετε CSS; Πάντα πέφτε πίσω! Σημαντικό; Ενημερώστε μας στα σχόλια.
Προτεινόμενη εικόνα / μικρογραφία, εικόνα ακρίβειας μέσω Shutterstock.