Γιατί ένα απλό κόμμα απλοποιεί την κωδικοποίηση
CSS ή Φύλλα στυλ Cascading, είναι ο αποδεκτός τρόπος βιομηχανίας σχεδιασμού ιστοσελίδων για την προσθήκη οπτικών στυλ σε έναν ιστότοπο. Με το CSS, μπορείτε να ελέγξετε τη διάταξη της σελίδας, τα χρώματα, την τυπογραφία , την εικόνα φόντου και πολλά άλλα. Βασικά, αν είναι ένα οπτικό στυλ, τότε το CSS είναι ο τρόπος να φέρει αυτά τα στυλ στην ιστοσελίδα σας.
Καθώς προσθέτετε στυλ CSS σε ένα έγγραφο, ίσως παρατηρήσετε ότι το έγγραφο αρχίζει να γίνεται όλο και περισσότερο. Ακόμη και ένας μικρός ιστότοπος με μόνο λίγες σελίδες μπορεί να καταλήξει σε ένα αρκετά μεγάλο αρχείο CSS και ένας πολύ μεγάλος ιστότοπος με πολλές και πολλές σελίδες μοναδικού περιεχομένου μπορεί να έχει πολύ μεγάλα αρχεία CSS. Αυτό συνδυάζεται με ανταποκρινόμενες ιστότοπους που έχουν πολλά ερωτήματα μέσων που περιλαμβάνονται στα φύλλα στυλ για να αλλάξουν τον τρόπο εμφάνισης των γραφικών και της σελίδας για διαφορετικές οθόνες.
Ναι, τα αρχεία CSS μπορούν να πάρουν μακρά. Αυτό δεν αποτελεί μείζον πρόβλημα όταν πρόκειται για την απόδοση του ιστότοπου και την ταχύτητα λήψης, επειδή ακόμη και ένα μακροσκελή αρχείο CSS είναι πιθανό να είναι αρκετά μικρό (δεδομένου ότι είναι στην πραγματικότητα απλώς ένα έγγραφο κειμένου). Ακόμα, κάθε μικρό κομμάτι μετράει όταν πρόκειται για την ταχύτητα σελίδας, οπότε αν μπορείτε να φτιάξετε το φύλλο στυλ σας πιο απαλή, αυτή είναι μια καλή ιδέα. Αυτό είναι όπου το "κόμμα" μπορεί να έρθει σε πολύ βολικό στο φύλλο στυλ σας!
Κόμματα και CSS
Μπορεί να έχετε αναρωτηθεί ποιος είναι ο ρόλος που παίζει το κόμμα στη σύνταξη επιλογής CSS . Όπως και στις προτάσεις, το κόμμα φέρνει σαφήνεια - όχι κώδικα - στους διαχωριστές. Το κόμμα σε έναν επιλογέα CSS χωρίζει τους πολλαπλούς επιλογείς μέσα στα ίδια στυλ.
Για παράδειγμα, ας δούμε κάποια CSS παρακάτω.
th {χρώμα: κόκκινο; }}
td {χρώμα: κόκκινο; }}
p.red {χρώμα: κόκκινο; }}
div # πρώτος (χρώμα: κόκκινο; }}
Με αυτή τη σύνταξη, λέτε ότι θέλετε τις ετικέτες, τις ετικέτες td, τις ετικέτες παραγράφων με την κόκκινη κλάση και την ετικέτα div με το αναγνωριστικό πρώτα, ώστε να έχει το χρώμα στυλ κόκκινο.
Αυτό είναι απολύτως αποδεκτό CSS, αλλά υπάρχουν δύο σημαντικά μειονεκτήματα για τη γραφή του με αυτό τον τρόπο:
- Στο μέλλον, εάν αποφασίσετε να αλλάξετε το χρώμα γραμματοσειράς αυτών των ιδιοτήτων σε μπλε χρώμα, θα πρέπει να κάνετε την αλλαγή αυτή τέσσερις φορές στο φύλλο στυλ σας.
- Προσθέτει πολλούς επιπλέον χαρακτήρες στο φύλλο στυλ που δεν χρειάζεστε. Αυτά τα τέσσερα στυλ μπορεί να μην φαίνονται σαν overkill, αλλά αν συνεχίσετε να το κάνετε σε ολόκληρο το φύλλο στυλ σας, οι γραμμές θα προσθέσουν και αυτό το φύλλο θα είναι πολύ, πολύ μεγαλύτερο από αυτό που χρειάζεται.
Για να αποφύγετε αυτά τα μειονεκτήματα και να εξομαλύνετε το αρχείο CSS, θα προσπαθήσουμε να χρησιμοποιήσουμε κόμματα.
Χρησιμοποιώντας κόμματα σε ξεχωριστούς επιλογείς
Αντί να γράφετε 4 ξεχωριστούς επιλογείς CSS και 4 κανόνες, μπορείτε να συνδυάσετε όλα αυτά τα στυλ σε μια ιδιότητα κανόνα διαχωρίζοντας τους μεμονωμένους επιλογείς με κόμμα. Εδώ είναι πώς θα γίνει αυτό:
th, td, p.red, div # firstred {χρώμα: κόκκινο; }}
Ο χαρακτήρας κόμμα βασικά λειτουργεί ως η λέξη "και" μέσα στον επιλογέα. Επομένως, αυτό ισχύει για τις ετικέτες t και τις ετικέτες td και τις ετικέτες παραγράφων με την κόκκινη κλάση ΚΑΙ την ετικέτα div με το πρώτο αναγνωριστικό. Αυτό ακριβώς είχαμε πριν, αλλά αντί να χρειαζόμαστε 4 κανόνες CSS, έχουμε έναν ενιαίο κανόνα με πολλαπλούς επιλογείς. Αυτό είναι αυτό που κάνει το κόμμα στον επιλογέα, μας επιτρέπει να έχουμε πολλαπλούς επιλογείς σε έναν κανόνα.
Όχι μόνο αυτή η προσέγγιση κάνει για πιο αδύναμα, καθαρότερα αρχεία CSS, αλλά κάνει και τις μελλοντικές ενημερώσεις τόσο ευκολότερες. Τώρα αν θέλετε να αλλάξετε το χρώμα από το κόκκινο στο μπλε, πρέπει μόνο να κάνετε την αλλαγή σε μια τοποθεσία αντί για τους αρχικούς κανόνες των 4 στυλ που είχαμε! Σκεφτείτε για αυτές τις εξοικονομήσεις χρόνου σε ένα ολόκληρο αρχείο CSS και μπορείτε να δείτε πώς αυτό θα σας εξοικονομήσει χρόνο και χώρο στο μακρύ τρένο!
Σύνταξη σύνταξης
Μερικοί άνθρωποι επιλέγουν να κάνουν το CSS πιο ευανάγνωστο διαχωρίζοντας κάθε επιλογέα στη δική του γραμμή, αντί να γράφει όλα σε μια γραμμή όπως παραπάνω. Έτσι θα γίνει αυτό:
th,
td,
p.red,
div # πρώτα
{
χρώμα: κόκκινο;
}}
Σημειώστε ότι τοποθετείτε ένα κόμμα μετά από κάθε επιλογέα και στη συνέχεια χρησιμοποιήστε το "enter" για να σπάσετε τον επόμενο επιλογέα στη δική του γραμμή. Δεν προσθέτετε κόμμα μετά τον τελικό επιλογέα.
Χρησιμοποιώντας κόμματα ανάμεσα στους επιλογείς σας, δημιουργείτε ένα πιο συμπαγές φύλλο στυλ που είναι ευκολότερο να ενημερωθεί στο μέλλον και είναι πιο εύκολο να το διαβάσετε σήμερα!
Αρχικό άρθρο από την Jennifer Krynin. Επεξεργασμένο από τον Jeremy Girard στις 5/8/17