Ομαδοποίηση πολλαπλών επιλογών CSS για βελτίωση της ταχύτητας φόρτωσης
Η αποδοτικότητα είναι ένας σημαντικός παράγοντας σε μια επιτυχημένη ιστοσελίδα. Αυτός ο ιστότοπος πρέπει να είναι αποτελεσματικός στο πώς χρησιμοποιεί τις εικόνες online . Αυτό θα βοηθήσει να διασφαλιστεί ότι ο ιστότοπος θα αποδίδει καλά στους επισκέπτες και θα φορτώνεται γρήγορα στις συσκευές τους. Η αποδοτικότητα θα πρέπει επίσης να αποτελεί μέρος της συνολικής σας διαδικασίας, βοηθώντας σας να κρατάτε την πρόοδο του ιστοτόπου στον χρόνο και στον προϋπολογισμό.
Στο τέλος, η αποτελεσματικότητα παίζει ρόλο σε όλες τις πτυχές της δημιουργίας ενός ιστοτόπου και της μακροπρόθεσμης επιτυχίας, συμπεριλαμβανομένων των μορφών που είναι γραμμένα για τα φύλλα CSS αυτού του ιστότοπου. Το να είναι σε θέση να δημιουργήσει πιο αθόρυβα, καθαρότερα αρχεία CSS είναι ιδανικό και ένας από τους τρόπους με τους οποίους μπορείτε να επιτύχετε αυτό είναι η ομαδοποίηση πολλαπλών επιλογών CSS μαζί.
Ομαδοποίηση επιλογών
Όταν ομαδοποιείτε τους επιλογείς CSS , εφαρμόζετε τα ίδια στυλ σε πολλά διαφορετικά στοιχεία χωρίς να επαναλάβετε τα στυλ στο φύλλο στυλ. Αντί να έχετε δύο ή τρεις ή περισσότερους κανόνες CSS, οι οποίοι κάνουν το ίδιο πράγμα (παράδειγμα, ρυθμίστε το χρώμα σε κάτι κόκκινο), έχετε έναν μόνο κανόνα CSS που επιτυγχάνει για τη σελίδα σας.
Υπάρχουν διάφοροι λόγοι για τους οποίους αυτή η "ομαδοποίηση επιλογών" ωφελεί μια σελίδα. Αρχικά, το φύλλο στυλ σας θα είναι μικρότερο και θα φορτώνεται πιο γρήγορα. Βεβαίως, τα φύλλα στυλ δεν είναι ένας από τους κύριους ενόχους όταν πρόκειται για αργούς χώρους φόρτωσης. Τα αρχεία CSS είναι αρχεία κειμένου, οπότε ακόμη και τα πολύ μακρά φύλλα CSS είναι μικροσκοπικά, μεγέθους αρχείων σοφά, σε σύγκριση με τις μη εξειδικευμένες εικόνες. Ακόμα, κάθε μικρό κομμάτι μετρά, και αν μπορείτε να ξυρίσετε κάποιο μέγεθος του CSS σας και να φορτώσετε τις σελίδες πολύ ταχύτερα, αυτό είναι πάντα καλό πράγμα που πρέπει να κάνετε.
Σε γενικές γραμμές, οι μέσες ταχύτητες φόρτωσης για ιστότοπους είναι μικρότερες από 3 δευτερόλεπτα. Τα 3 έως 7 δευτερόλεπτα είναι περίπου κατά μέσο όρο και περισσότερα από 7 δευτερόλεπτα είναι πολύ αργά. Αυτοί οι χαμηλοί αριθμοί σημαίνουν ότι, για να επιτευχθεί με το site σας, πρέπει να κάνετε ό, τι μπορείτε! Αυτός είναι ο λόγος για τον οποίο μπορείτε να βοηθήσετε να διατηρήσετε τον ιστότοπό σας ταχεία χρησιμοποιώντας ομαδοποιημένους επιλογείς CSS.
Πώς να ομαδοποιήσετε τους επιλογείς CSS
Για να ομαδοποιήσετε τους επιλογείς CSS μαζί στο φύλλο στυλ σας, χρησιμοποιείτε κόμματα για να διαχωρίσετε πολλαπλούς ομαδοποιημένους επιλογείς στο στυλ. Στο παρακάτω παράδειγμα, το στυλ επηρεάζει τα στοιχεία p και div:
div, p {χρώμα: # f00; }}Το κόμμα βασικά σημαίνει "και". Επομένως, αυτός ο επιλογέας ισχύει για όλα τα στοιχεία παραγράφου ΚΑΙ όλα τα στοιχεία διαίρεσης. Αν το κόμμα λείπει, θα ήταν αντίθετα όλα τα στοιχεία της παραγράφου που είναι παιδί μιας διαίρεσης. Αυτό είναι ένα πολύ διαφορετικό είδος επιλογέα, έτσι αυτό το κόμμα πραγματικά αλλάζει την έννοια του επιλογέα!
Οποιαδήποτε μορφή επιλογέα μπορεί να ομαδοποιηθεί με οποιονδήποτε άλλο επιλογέα. Σε αυτό το παράδειγμα, ένας επιλογέας κλάσης ομαδοποιείται με έναν επιλογέα ταυτότητας:
p.red, #sub {χρώμα: # f00; }}Επομένως, αυτό το στυλ ισχύει για κάθε παράγραφο με το χαρακτηριστικό κλάσης "κόκκινο", ΚΑΙ οποιοδήποτε στοιχείο (δεδομένου ότι δεν καθορίσαμε το είδος) που έχει ένα χαρακτηριστικό ταυτότητας "sub".
Μπορείτε να ομαδοποιήσετε οιονδήποτε αριθμό επιλογέων μαζί, συμπεριλαμβανομένων των επιλογέων που είναι μεμονωμένες λέξεις και επιλογείς compund. Αυτό το παράδειγμα περιλαμβάνει τέσσερις διαφορετικούς επιλογείς:
p, .red, #sub, div a: σύνδεσμος {χρώμα: # f00; }}Επομένως, αυτός ο κανόνας CSS θα ισχύει για τα εξής:
- Οποιοδήποτε στοιχείο παραγράφου
- Κάθε στοιχείο με την κατηγορία "κόκκινο"
- Οποιοδήποτε στοιχείο με αναγνωριστικό "sub"
- Η ψευδο-τάξη "συνδέσμου" των στοιχείων αγκύρωσης που είναι αποδεκτές μιας διαίρεσης.
Αυτός ο τελευταίος επιλογέας είναι ένας σύνθετος επιλογέας. Μπορείτε να δείτε ότι είναι εύκολο να συνδυαστεί με τους άλλους επιλογείς σε αυτόν τον κανόνα CSS. Με αυτόν τον κανόνα, θέτουμε το χρώμα του # f00 (το οποίο είναι κόκκινο) σε αυτούς τους 4 επιλογείς, το οποίο είναι προτιμότερο να γράψουμε 4 ξεχωριστούς επιλογείς για να επιτύχουμε το ίδιο αποτέλεσμα.
Ένα άλλο πλεονέκτημα της επιλογής ομαδοποίησης είναι ότι, αν χρειαστεί να κάνετε μια αλλαγή, μπορείτε να επεξεργαστείτε έναν ενιαίο κανόνα CSS αντί για πολλαπλούς. Αυτό σημαίνει ότι αυτή η προσέγγιση σας εξοικονομεί βάρος και χρόνο στη σελίδα όταν πρόκειται να διατηρήσετε το site στο μέλλον.
Οποιοσδήποτε επιλογέας μπορεί να ομαδοποιηθεί
Όπως μπορείτε να δείτε από τα παραπάνω παραδείγματα, οποιοσδήποτε έγκυρος επιλογέας μπορεί να τοποθετηθεί σε μια ομάδα και όλα τα στοιχεία του εγγράφου που ταιριάζουν με όλα τα ομαδοποιημένα στοιχεία θα έχουν το ίδιο στυλ βάσει αυτής της ιδιότητας στυλ.
Μερικοί άνθρωποι προτιμούν να απαριθμήσουν τα ομαδοποιημένα στοιχεία σε ξεχωριστές γραμμές για ευκρίνεια στον κώδικα. Η εμφάνιση στον ιστότοπο και η ταχύτητα φόρτωσης παραμένουν οι ίδιες. Για παράδειγμα, μπορείτε να συνδυάσετε στυλ που χωρίζονται με κόμματα σε μια ιδιότητα στυλ σε μια γραμμή κώδικα:
th, td, p.red, div # firstred {χρώμα: κόκκινο; }}
ή μπορείτε να καταγράψετε τα στυλ σε ξεχωριστές γραμμές για λόγους σαφήνειας:
th,
td,
p.red,
div # πρώτα
{
χρώμα: κόκκινο;
}}
Κάθε μέθοδος που χρησιμοποιείτε για να ομαδοποιήσετε πολλαπλούς επιλογείς CSS επιταχύνει τον ιστότοπό σας και διευκολύνει τη διαχείριση των στυλ μακροπρόθεσμα.
Αρχικό άρθρο από την Jennifer Krynin. Επεξεργασμένο από τον Jeremy Girard στις 5/8/17.