Η πιο σημαντική ιδέα CSS για μάθηση

Το Cascade είναι πώς σχεδιάστηκε το CSS από την αρχή και υπάρχει ένας λόγος που ονομάζεται CSS - Cascading Style Sheets!

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

Αλλά τι ακριβώς είναι το Cascade, και είναι τόσο κακό όσο το κάνουν οι περισσότεροι άνθρωποι;

Εισαγωγή

Ας υποθέσουμε ότι ο Τζον γράφει ένα σωρό CSS και στη συνέχεια μπαίνει στο πρόγραμμα περιήγησης για να το δοκιμάσει. Προς έκπληξή του, τα στυλ που έγραψε δεν εφαρμόζονται στο στοιχείο που μόλις είχε στυλ, αλλά μερικά άλλα στυλ είναι!

Το βλέπεις εκεί; Αυτό είναι ένα από τα χειρότερα πράγματα για τα οποία διαμαρτύρονται όλοι όταν λένε "CSS χάλια".

Με το CSS, πολλά στυλ μπορούν να επηρεάσουν ένα μόνο στοιχείο. Έχετε λοιπόν paragraphμια ιστοσελίδα. Αλλά αυτό paragraphμπορεί να είναι στυλ από οποιοδήποτε μπλοκ CSS, κυριολεκτικά.

Είναι σαν να έχουμε μια καθολική μεταβλητή JavaScript που μπορεί να χειριστεί από οποιαδήποτε λειτουργία μέσα στον κώδικα. Φαίνεται μια συνταγή για καταστροφή.

Αλλά και πάλι, ο Cascade σχηματίζει το θεμελιώδες σκεπτικό πίσω από το πώς δημιουργήθηκε το CSS.

Αποδέξου το?

Λοιπόν, δεν μπορείτε να το αλλάξετε.

Τι είναι ο καταρράκτης;

Ο καταρράκτης είναι ο τρόπος με τον οποίο το πρόγραμμα περιήγησης καθορίζει τα στυλ που θα εφαρμοστούν σε ένα συγκεκριμένο στοιχείο. Είναι τόσο απλό και κάνει μια αξιοπρεπή ερώτηση συνέντευξης για έναν προγραμματιστή front-end.

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

  1. Η ιδιαιτερότητα των επιλογών στοιχείων
  2. Η σειρά των στυλ που γράφονται

Ας ρίξουμε μια γρήγορη ματιά σε αυτά.

Ειδικότητα επιλογέα

Μπορείτε να παρομοιάσετε την ειδικότητα του επιλογέα με το πώς το ανθρώπινο μυαλό ερμηνεύει τις οδηγίες.

Για παράδειγμα, εξετάστε το παρακάτω γράφημα:

Αν σας έλεγα, «Περάστε μου το κόκκινο κουτί». Ποιο θα μου περάσατε; Υπάρχουν δύο από αυτά!

Μπορείτε να κάνετε την επόμενη ερώτηση, "Ποιο από τα κουτιά, a ή b;" .

Ή μπορείτε ακόμη και να τραβήξετε και τα δύο κουτιά! Δεν είναι και τα δύο κόκκινα κουτιά;

Αυτή είναι η κατάσταση που βρίσκεται το πρόγραμμα περιήγησης όταν ασχολείται με την ιδιαιτερότητα.

Όταν λέτε, στυλ της παραγράφου με κόκκινο χρώμα φόντου…

p { background-color: red;}

Δεδομένου ότι θα μπορούσαν να υπάρχουν πολλά στοιχεία παραγράφου στη σελίδα, το πρόγραμμα περιήγησης πηγαίνει, "ποια παράγραφος;"

Το πρόγραμμα περιήγησης δεν μπορεί να σας κάνει μια επόμενη ερώτηση, οπότε προχωρά και προσπαθεί να σχεδιάσει κάθε παράγραφο της σελίδας με redφόντο.

Ωστόσο, αν προχωρήσατε για να πείτε, στυλ της παραγράφου με όνομα κλάσης reddyμε κόκκινο φόντο:

p.reddy { background-color: red;}

Αυτό είναι ένα πιο συγκεκριμένο αίτημα!

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

Αυτό είναι!

Τεχνικά, το πρόγραμμα περιήγησης ρίχνει μια ματιά σε κάθε επιλογέα που στοχεύει ένα συγκεκριμένο στοιχείο και εκχωρεί "σκορ" σε καθένα από αυτά και κερδίζει κάποιον με υψηλότερη ειδικότητα.

Ο τρόπος υπολογισμού των αποτελεσμάτων είναι απλός.

Ας υποθέσουμε ότι το πρόγραμμα περιήγησης - ενώ ερμηνεύει το CSS σας - είχε 4 αναρτήσεις στόχου.

  1. Για κάθε ενσωματωμένο στυλ που στοχεύει ένα στοιχείο χρησιμοποιώντας το styleχαρακτηριστικό, αντιστοιχεί 1 στόχος στην ανάρτηση στόχου (a).
  2. Για κάθε idεπιλογέα, 1 στόχος ανατίθεται για δημοσίευση (b).
  3. Για κάθε classεπιλογέα, επιλογέα χαρακτηριστικών και ψευδο-τάξεις που υπάρχουν, 1 στόχος ανατίθεται για δημοσίευση (c).
  4. Για κάθε επιλογέα στοιχείων και ψευδο-στοιχείο, αντιστοιχεί 1 στόχος στην ανάρτηση (d).

Ο τρόπος που το θυμάμαι είναι χρησιμοποιώντας το ακρωνύμιο SICAPEP:

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

Ένα παράδειγμα γρήγορης ειδικότητας

Εξετάστε τις ακόλουθες δηλώσεις στυλ:

#nav .removed > a:hover {}
li:last-child h3 .title {}

Πώς θα υπολογίζει το πρόγραμμα περιήγησης την ειδικότητα «πόντων» για αυτούς τους επιλογείς;

#nav .removed > a:hover

Εδώ είναι η ανάλυση:

(α) Δεν υπάρχει ενσωματωμένο στυλ, επομένως το σκορ για την πρώτη θέση γκολ είναι 0.

(β) Υπάρχει ένας idεπιλογέας, #navδηλαδή το σκορ 1 για τη δεύτερη θέση γκολ.

(γ) Υπάρχει επίσης ένας classεπιλογέας .removedκαι ένας ψευδο-επιλογέας, :hoverο οποίος ανέρχεται σε ένα σκορ 2 για την τρίτη θέση στόχου.

(δ) Υπάρχει ένας επιλογέας στοιχείων a, δηλαδή βαθμολογία 1 στην τέταρτη θέση.

Εδώ είναι η γραφική αναπαράσταση των αποτελεσμάτων.

Η συνολική βαθμολογία ειδικότητας συνδυάζεται ως 0121.

Όπως με τα κανονικά μαθηματικά, 0001είναι μικρότερο από 0005και 0121είναι μεγαλύτερο από 0021.

Τώρα, καταλαβαίνετε πώς υπολογίζεται η ειδικότητα.

Μπορείτε να επιχειρήσετε να υπολογίσετε την ιδιαιτερότητα για τον άλλο επιλογέα li:last-child h3 .title;

Επιτρέψτε μου να ξέρω σε τι φτάνετε στην ενότητα σχολίων :)

Παραγγελία στυλ

Ο δεύτερος παράγοντας που επηρεάζει τον καταρράκτη είναι η σειρά των στυλ. Ένα πραγματικά βασικό παράδειγμα μπορεί να φανεί με το στυλ του ίδιου στοιχείου σε 2 διαφορετικά μπλοκ κώδικα.

Για παράδειγμα:

p.reddy { background: red;}p.reddy { background: blue;}

Παρόλο που και οι δύο επιλογείς έχουν την ίδια ιδιαιτερότητα 0011, η σειρά του συνόλου κανόνων μπαίνει στο παιχνίδι.

Η δεύτερη δήλωση θα παρακάμψει την πρώτη και η παράγραφος θα είναι μπλε και όχι κόκκινη.

Ερώτηση παγίδα

Λαμβάνοντας υπόψη το παρακάτω έγγραφο, ποιο θα ήταν το χρώμα του κειμένου του συνδέσμου;

 Inline Styles and Specificity  #nav-force > ul > li > a.nav-link { color: blue; };     
  • Link
  • Μπλε ή κόκκινο;

    Λάβετε υπόψη ότι ο σύνδεσμος έχει στυλ τόσο ενσωματωμένο όσο και εντός του &lμπλοκ t; / style>.

    Ω, αν αισθάνεστε σίγουροι, απλώς πείτε την απάντηση δυνατά - στον εαυτό σας.

    Αλλά η πραγματική απάντηση είναι ότι το ενσωματωμένο στυλ κερδίζει πάντα. Το γκολ σημειώνεται στην πρώτη θέση, η οποία κερδίζει οποιοδήποτε γκολ σε οποιαδήποτε από τις άλλες θέσεις.

    Γιατί;

    Η τελική ιδιαιτερότητα θα είναι της τάξης των χιλιάδων - 1000 - και θα κερδίσει 9 γκολ στη δεύτερη θέση. 1000 είναι μεγαλύτερο από 0900.

    ΣΗΜΕΙΩΣΗ: Όπως επεσήμανε ο Paul McCann στην ενότητα σχολίων, η παραπάνω παράγραφος είναι υπερβολική απλοποίηση. Ρίξτε μια ματιά σε αυτά που λέει.

    συμπέρασμα

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

    Τα λέμε αργότερα!

    Είστε έτοιμοι να γίνετε επαγγελματίες;

    Έχω δημιουργήσει έναν δωρεάν οδηγό CSS για να αποκτήσω αμέσως τις δεξιότητές σας CSS. Αποκτήστε το δωρεάν ebook.