Όταν ομαδοποιείτε τους επιλογείς CSS, εφαρμόζετε τα ίδια στυλ σε πολλά διαφορετικά στοιχεία χωρίς να επαναλαμβάνετε τα στυλ στο φύλλο στυλ σας. Αντί να έχετε δύο, τρεις ή περισσότερους κανόνες CSS που κάνουν το ίδιο πράγμα (για παράδειγμα, ορίστε το χρώμα κάποιου κόκκινου), χρησιμοποιείτε έναν μόνο κανόνα CSS που επιτυγχάνει το ίδιο πράγμα. Το μυστικό αυτής της τακτικής ενίσχυσης της αποδοτικότητας είναι το κόμμα.
Τρόπος ομαδοποίησης επιλογών CSS
Για να ομαδοποιήσετε τους επιλογείς CSS σε ένα φύλλο στυλ, Χρησιμοποιήστε κόμματα για να διαχωρίσετε πολλούς ομαδοποιημένους επιλογείς στο στυλ. Σε αυτό το παράδειγμα, το στυλ επηρεάζει τα στοιχεία p και div:
div, p {color: # f00; }
Σε αυτό το πλαίσιο, ένα κόμμα σημαίνει "και", οπότε αυτός ο επιλογέας ισχύει για όλα τα στοιχεία παραγράφου και όλα τα στοιχεία διαίρεσης. Εάν το κόμμα λείπει, ο επιλογέας θα εφαρμόζει αντ 'αυτού σε όλα τα στοιχεία παραγράφου που είναι θυγατρικά μιας διαίρεσης. Αυτό είναι ένα διαφορετικό είδος επιλογέα, επομένως το κόμμα είναι σημαντικό.
Μπορείτε να ομαδοποιήσετε οποιαδήποτε μορφή επιλογέα με οποιονδήποτε άλλο επιλογέα. Αυτό το παράδειγμα ομαδοποιεί έναν επιλογέα τάξης με έναν επιλογέα ταυτότητας:
p.red, #sub {color: # f00; }
Αυτό το στυλ ισχύει για οποιαδήποτε παράγραφο με το χαρακτηριστικό κλάσης του το κόκκινο και οποιοδήποτε στοιχείο (επειδή το είδος δεν προσδιορίζεται) με ένα χαρακτηριστικό ID υπο.
Μπορείτε να ομαδοποιήσετε οποιονδήποτε αριθμό επιλογών, συμπεριλαμβανομένων επιλογών που είναι μεμονωμένες λέξεις και σύνθετες επιλογές. Αυτό το παράδειγμα περιλαμβάνει τέσσερις διαφορετικούς επιλογείς:
p, .red, #sub, div a: link {color: # f00; }
Αυτός ο κανόνας CSS θα ισχύει για:
- Οποιοδήποτε στοιχείο παραγράφου
- Οποιοδήποτε στοιχείο με την κλάση του το κόκκινο
- Οποιοδήποτε στοιχείο με αναγνωριστικό του υπο
- ο Σύνδεσμος ψευδοκλάση των στοιχείων αγκύρωσης που είναι απόγονοι μιας διαίρεσης.
Αυτός ο τελευταίος επιλογέας είναι ένας σύνθετος επιλογέας. Όπως φαίνεται, συνδυάζεται εύκολα με τους άλλους επιλογείς σε αυτόν τον κανόνα CSS. Ο κανόνας καθορίζει το χρώμα του # στ (κόκκινο) σε αυτούς τους τέσσερις επιλογείς, που είναι προτιμότερο να γράφετε τέσσερις ξεχωριστούς επιλογείς για να επιτύχετε το ίδιο αποτέλεσμα.
Οποιοσδήποτε επιλογέας μπορεί να ομαδοποιηθεί
Μπορείτε να τοποθετήσετε οποιονδήποτε έγκυρο επιλογέα σε μια ομάδα και όλα τα στοιχεία στο έγγραφο που ταιριάζουν με όλα τα ομαδοποιημένα στοιχεία θα έχουν το ίδιο στυλ βάσει αυτής της ιδιότητας στυλ.
Μερικοί σχεδιαστές προτιμούν να αναφέρουν τη λίστα ομαδοποιημένα στοιχεία σε ξεχωριστές γραμμές για αναγνωσιμότητα στον κώδικα. Η εμφάνιση στον ιστότοπο και η ταχύτητα φόρτωσης παραμένουν ίδια. Για παράδειγμα, μπορείτε να συνδυάσετε στυλ διαχωρισμένα με κόμματα σε ιδιότητα ενός στυλ σε μία γραμμή κώδικα:
th, td, p.red, div # firstred {χρώμα: κόκκινο; }
ή μπορείτε να αναφέρετε τα στυλ σε μεμονωμένες γραμμές για σαφήνεια:
ου,
td,
σ. κόκκινο,
div # firstred
{
χρώμα: κόκκινο;
}
Γιατί Group CSS Selectors;
Η ομαδοποίηση των επιλογών CSS συμβάλλει στην ελαχιστοποίηση του μεγέθους του φύλλου στυλ σας, ώστε να φορτώνεται γρηγορότερα. Βεβαίως, τα φύλλα στυλ δεν είναι οι κύριοι ένοχοι σε αργή φόρτωση. Τα αρχεία CSS είναι αρχεία κειμένου, οπότε ακόμη και τα πολύ μεγάλα φύλλα CSS είναι μικροσκοπικά σε σύγκριση με τις μη βελτιστοποιημένες εικόνες. Παρόλα αυτά, κάθε βελτιστοποίηση βοηθά και αν μπορείτε να ξυρίσετε κάποιο μέγεθος από το CSS σας και να φορτώσετε τις σελίδες πολύ πιο γρήγορα, αυτό είναι καλό.
Η ομαδοποίηση επιλογών διευκολύνει επίσης τη συντήρηση του ιστότοπου. Εάν πρέπει να κάνετε μια αλλαγή, μπορείτε απλά να επεξεργαστείτε έναν κανόνα CSS αντί για πολλούς. Αυτή η προσέγγιση εξοικονομεί χρόνο και ταλαιπωρία.
Η κατώτατη γραμμή: Η ομαδοποίηση των επιλογών CSS ενισχύει την αποδοτικότητα, την παραγωγικότητα, την οργάνωση και, σε ορισμένες περιπτώσεις, ακόμη και την ταχύτητα φόρτωσης.