Οι προγραμματιστές συχνά δυσκολεύονται να ονομάσουν κλάσεις και αναγνωριστικά CSS. Ακολουθήστε αυτές τις βέλτιστες πρακτικές για αποτελεσματική ονομασία.
Οι συμβάσεις ονομασίας για κλάσεις και αναγνωριστικά CSS έχουν σημαντικό ρόλο στην κατανόηση και τη διατήρηση του κώδικα σε ένα έργο JavaScript. Τα ονόματα που χρησιμοποιούνται ενδέχεται να βελτιώσουν τη σαφήνεια, την επαναχρησιμοποίηση και την ευελιξία της βάσης κωδικών. Η τήρηση βέλτιστων πρακτικών είναι σημαντική κατά την ονομασία κλάσεων και αναγνωριστικών CSS σε ένα έργο JavaScript.
1. Χρησιμοποιήστε σημασιολογικά ονόματα
Η επιλογή ονομάτων που εξηγούν επακριβώς τη λειτουργία ή τον σκοπό του στοιχείου είναι ζωτικής σημασίας. Τα σημασιολογικά ονόματα παρέχουν ουσιαστικό πλαίσιο και κάνουν τον κώδικα πιο κατανοητό.
Για παράδειγμα, αντί να χρησιμοποιείτε παραδοσιακά ονόματα όπως κουτί ή κάτοχος, δοκιμάστε να χρησιμοποιήσετε ονόματα όπως επί κεφαλής ή πλαϊνή μπάρα που αντικατοπτρίζουν τον συγκεκριμένο ρόλο του στοιχείου.
/* Παράδειγμα σημασιολογικών ονομάτων */
.επί κεφαλής {}
.πλευρική μπάρα {}
2. Χρησιμοποιήστε Συνεπείς Συμβάσεις Ονομασίας
Η συνέπεια είναι το κλειδί κατά την ονομασία κλάσεων και αναγνωριστικών CSS. Η χρήση του ίδιου προτύπου ονομασίας καθιστά απλούστερη τη διατήρηση της δομής της βάσης κωδικών.
Οι συμβάσεις ονομασίας BEM (Block Element Modifier) και OOCSS (Object-Oriented CSS) είναι οι πιο προτιμώμενες συμβάσεις ονομασίας.
Μπορείτε να χρησιμοποιήσετε τη σύμβαση ονομασίας OOCSS για να γράψετε κώδικα CSS που είναι αρθρωτός, διαχειρίσιμος και επεκτάσιμος. Εδώ είναι μια απεικόνιση του πώς μπορείτε δημιουργήστε ένα μενού πλοήγησης χρησιμοποιώντας OOCSS:
/* Δομή */.nav {
απεικόνιση: καλώδιο;
στιλ λίστας: κανένας;
}.nav__item {
περιθώριο-δεξιά: 1rem;
}.nav__link {
κείμενο-διακόσμηση: κανένας;
χρώμα: #333;
}/* Εμφάνιση */
.nav__link:φτερουγίζω {
κείμενο-διακόσμηση: υπογραμμίζω;
}
Έχετε δύο διακριτά μέρη του κώδικα για το μενού πλοήγησης σε αυτό το παράδειγμα, ένα για τη δομή και ένα για την εμφάνιση. Το τμήμα εμφάνισης περιγράφει τα χρώματα και άλλα στυλ που του δίνουν μια ελκυστική εμφάνιση, ενώ η ενότητα δομής εξηγεί πώς και πού θα τοποθετηθούν τα στοιχεία μενού.
3. Αποφύγετε τους χώρους ονομάτων
Στο CSS, οι χώροι ονομάτων είναι σημασιολογικές δομές που σας επιτρέπουν να παρέχετε ένα πρόθεμα χώρου ονομάτων για τις επιλογές τους. Για να γίνει διάκριση μεταξύ λειτουργικών μονάδων, βιβλιοθηκών ή άλλων τμημάτων της βάσης κώδικα που θα μπορούσαν να έχουν ονόματα κλάσεων σε διένεξη, χρησιμοποιείται το πρόθεμα χώρου ονομάτων.
Αυτή η δυνατότητα είναι χρήσιμη, ωστόσο, μπορεί να προκαλέσει προβλήματα ειδικότητας και συντήρησης.
Ένα από τα μεγαλύτερα μειονεκτήματα των χώρων ονομάτων είναι η δυσκολία χειρισμού της ιδιαιτερότητας του επιλογέα. Ένα πρόθεμα χώρου ονομάτων μπορεί να κάνει μια επιλογή πιο συγκεκριμένη, καθιστώντας πιο δύσκολη την παράκαμψη στυλ στο μέλλον.
Αυτό οδηγεί σε διόγκωση κώδικα CSS, που είναι μπερδεμένο και δύσκολο να διατηρηθεί με την πάροδο του χρόνου.
Πάρτε, για παράδειγμα:
/* Με χώρο ονομάτων */.my-module.περιεχόμενο {
χρώμα του φόντου: μπλε;
}/* Χωρίς χώρο ονομάτων */
.module-header {
χρώμα του φόντου: το κόκκινο;
}.ενότητα-περιεχόμενο {
χρώμα του φόντου: κίτρινος;
}
Το πρόθεμα χώρου ονομάτων .my-module και .περιεχόμενο χρησιμοποιούνται και τα δύο στο κύριο μπλοκ κώδικα. Ως αποτέλεσμα, η επιλογή γίνεται πιο ακριβής, καθιστώντας το μελλοντικό στυλ πιο απαιτητικό.
Στο δεύτερο μέρος, ο χώρος ονομάτων αντικαθίσταται από περιγραφικά ονόματα κλάσεων .module-header και .ενότητα-περιεχόμενο. Εκτός από το ότι ο κώδικας γίνεται πιο κατανοητός, αυτό καθιστά επίσης πιο εύκολη τη διατήρησή του.
Η χρήση χώρων ονομάτων προσθέτει περιττή πολυπλοκότητα στο πρόγραμμά σας, ειδικά όταν πολλά άτομα εργάζονται σε διαφορετικά μέρη του ίδιου έργου. Μπορεί να δυσκολευτείτε να κατανοήσετε και να αλλάξετε ο ένας τον κώδικα του άλλου, καθώς διαφορετικές ομάδες μπορεί να χρησιμοποιούν διαφορετικά προθέματα χώρου ονομάτων.
Χρησιμοποιήστε ονόματα κλάσεων που είναι περιγραφικά για παράδειγμα:
.επί κεφαλής {χρώμα του φόντου: το κόκκινο;
}
.περιεχόμενο {
χρώμα του φόντου: κίτρινος;
}
Χρησιμοποιώντας περιγραφικά ονόματα κλάσεων, μπορείτε να καταργήσετε την απαίτηση για χώρους ονομάτων και μπορείτε να διατηρήσετε τη βάση κώδικα σας καλά δομημένη και εύκολα κατανοητή.
4. Αποφύγετε τα καθολικά ονόματα
Στα έργα JavaScript, η αποφυγή καθολικών ονομάτων για κλάσεις και αναγνωριστικά CSS είναι κρίσιμης σημασίας. Οι παγκόσμιες ονομασίες περιπλέκουν τη συντήρηση του κώδικα και αυξάνουν την πιθανότητα ονοματοδοσίας. Για να διασφαλίσετε μια πιο διαρκή και κλιμακούμενη βάση κώδικα, είναι καλό να χρησιμοποιείτε πιο ακριβή ονόματα εντός του πεδίου εφαρμογής ενός στοιχείου ή μιας μονάδας.
Εξετάστε το παρακάτω παράδειγμα:
Λανθασμένη χρήση καθολικών ονομάτων<divτάξη="δοχείο">
<divτάξη="πλευρική μπάρα">Περιεχόμενο εδώ
div>
div>
Τα γενικά ονόματα κλάσεων πλαϊνή μπάρα και δοχείο στο παραπάνω παράδειγμα είναι επιρρεπείς σε συγκρούσεις με άλλα φύλλα στυλ ή κώδικα JavaScript μέσα στο έργο. Για παράδειγμα, εάν δύο φύλλα στυλ καθορίζουν το ίδιο .πλευρική μπάρα κατηγορίας, η μία με μπλε φόντο και η άλλη με κόκκινο φόντο, το χρώμα της πλαϊνής γραμμής θα εξαρτηθεί από το ποιο φύλλο στυλ έχει φορτωθεί. Μπορεί να προκύψουν απροσδόκητα και απρόβλεπτα αποτελέσματα από αυτό.
Είναι προτιμότερο να χρησιμοποιείτε πιο ακριβή ονόματα που εμπίπτουν στο σχετικό στοιχείο ή λειτουργική μονάδα για να ελαχιστοποιήσετε αυτά τα προβλήματα.
Δείτε μια βελτιωμένη έκδοση.
Βελτιώθηκε με συγκεκριμένα ονόματα<divτάξη="header__container">
<divτάξη="sidebar__content">Περιεχόμενο εδώ
div>
div>
Στην αλλαγμένη έκδοση, τα ονόματα των κλάσεων header__container και sidebar__content ξεκαθαρίστε τι χρησιμεύει κάθε στοιχείο και τι κάνει.
Η χρήση συγκεκριμένων ονομάτων μειώνει τον κίνδυνο διενέξεων ονομάτων και διασφαλίζει ότι τα στυλ επηρεάζουν μόνο τα αναμενόμενα στοιχεία εντός των αντίστοιχων στοιχείων ή λειτουργικών μονάδων τους.
5. Χρησιμοποιήστε τη σύμβαση ονομασίας BEM
Η σύμβαση ονομασίας BEM (Block Element Modifier) είναι δημοφιλής για την ονομασία κλάσεων και αναγνωριστικών CSS σε έργα JavaScript. Το BEM παρέχει έναν δομημένο και αρθρωτό τρόπο ονομασίας στοιχείων, ενθαρρύνει την επαναχρησιμοποίηση και διευκολύνει τη διατήρηση βάσεων κωδικών.
Οι συμβάσεις BEM αποτελούνται από μπλοκ, στοιχεία και τροποποιητές. Ένα στοιχείο υψηλού επιπέδου ή ένα αυτόνομο στοιχείο ονομάζεται μπλοκ. Τα στοιχεία είναι τα συστατικά μέρη ενός μπλοκ που βασίζονται στο περιβάλλον του μπλοκ. Οι τροποποιητές μπορούν να αλλάξουν την εμφάνιση ή τη συμπεριφορά ενός μπλοκ ή στοιχείου.
Ακολουθεί ένα παράδειγμα που χρησιμοποιεί τη σύμβαση ονομασίας BEM:
/* Παράδειγμα σύμβασης ονομασίας BEM *//* ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ */
.επί κεφαλής {}/* Στοιχείο του μπλοκ */
.header__logo {}
.header__menu {}
/* Τροποποιητής του στοιχείου */
.header__menu--ενεργό {}
Η παραπάνω εικόνα εμφανίζει α επί κεφαλής μπλοκ με α λογότυπο και ένα μενού στοιχείο. ο μενού το στοιχείο λαμβάνει το ενεργός αλλαγή για να δείξει ότι έχει γίνει ενεργή.
Μπορείτε να αναγνωρίσετε γρήγορα τα θεμελιώδη στοιχεία και τις συνδέσεις μεταξύ των διαφόρων τμημάτων, καθιστώντας τη δομή και την ιεραρχία της βάσης κωδικών σαφέστερη.
6. Χρησιμοποιήστε προθέματα ή επιθήματα
Μπορείτε να προσθέσετε πρόσθετες ρυθμίσεις σε ονόματα κλάσεων και αναγνωριστικών CSS, τοποθετώντας τα προθέματα ή μετατοποθετώντας τα, ιδιαίτερα σε μεγαλύτερα έργα. Μπορείτε να χρησιμοποιήσετε ένα πρόθεμα όπως js- για να υποδείξει ότι μια κλάση ή ένα αναγνωριστικό προσφέρει δυνατότητες JavaScript. Συμβάσεις ονομασίας JavaScript Σε συνδυασμό με αυτές τις συμβάσεις ονομασίας CSS μπορούν να σας εξοικονομήσουν χρόνο και προσπάθεια μακροπρόθεσμα.
HTML με πρόθεμα JavaScript<κουμπίτάξη="js-toggle">Μεταβάλλωκουμπί>
<divταυτότητα="js-modal">Τροπικόςdiv>
7. Χρησιμοποιήστε περιγραφικά ονόματα
Μπορείτε να κατανοήσετε καλύτερα τον σκοπό, τη λειτουργία ή το περιεχόμενο ενός στοιχείου μέσω περιγραφικών ονομάτων.
Εξετάστε το παρακάτω παράδειγμα:
/* Μη περιγραφικά ονόματα */.μπλε-κουτί {
/* Στυλ εδώ */
}
ένα {
/* Στυλ εδώ */
}
Τα ονόματα των τάξεων μπλε-κουτί και ένα στο παραπάνω παράδειγμα δεν μεταδίδουν σχετικές πληροφορίες για τα εξαρτήματα στα οποία αναφέρονται. Η απουσία περιγραφικής ονομασίας μπορεί να σας δυσκολέψει να κατανοήσετε γρήγορα τους σκοπούς ή τους ρόλους ορισμένων στοιχείων μέσα στο πρόγραμμα.
Χρησιμοποιήστε περιγραφικά ονόματα που εξηγούν με ακρίβεια τον ρόλο του στοιχείου βελτίωση της αναγνωσιμότητας και της δυνατότητας συντήρησης του κώδικα.
Εξετάστε το παρακάτω βελτιωμένο παράδειγμα:
/* Περιγραφικά ονόματα */.προϊόν-κάρτα {
/* Στυλ εδώ */
}
.πλοήγηση-σύνδεσμος {
/* Στυλ εδώ */
}
Τα ονόματα των τάξεων προϊόν-κάρτα και σύνδεσμος πλοήγησης στην ενημερωμένη έκδοση καθιστούν προφανές ποιο σκοπό εξυπηρετεί κάθε στοιχείο. Θα βρείτε απλούστερη την εξερεύνηση και την επεξεργασία του κώδικα με αυτά τα περιγραφικά ονόματα.
Η χρήση περιγραφικών ονομάτων ωφελεί τους σημερινούς και τους πιθανούς μελλοντικούς προγραμματιστές που εργάζονται στη βάση κώδικα. Όταν επισκέπτεστε ξανά τον κώδικα μετά από κάποιο χρονικό διάστημα, μπορείτε εύκολα να κατανοήσετε τη δομή και τη λειτουργία των κομματιών.
8. Χρησιμοποιήστε σύντομα και συνοπτικά ονόματα
Ενώ τα διακριτικά ονόματα είναι απαραίτητα, είναι επίσης σημαντικό να διατηρούνται συνοπτικά. Τα μεγάλα ονόματα κλάσεων και αναγνωριστικών ενδέχεται να κάνουν τον κωδικό πιο δύσκολο να διαβάσει και να διατηρήσει. Προσπαθήστε να επιτύχετε μια ισορροπία μεταξύ του να είστε σύντομοι και λεπτομερείς. Επιπλέον, εξετάστε το ενδεχόμενο να χρησιμοποιήσετε γνωστά ακρωνύμια ή συντομογραφίες στο πλαίσιο του έργου.
Εξετάστε την περίπτωση που θέλετε να χρησιμοποιήσετε CSS για να προσαρμόσετε ένα μενού πλοήγησης στον ιστότοπό σας. Μπορείτε να χρησιμοποιήσετε μικρότερα, πιο συγκεκριμένα ονόματα όπως nav-στοιχείο ή Nav-link αντί για μακριές όπως διεπαφή πλοήγησης ή κύρια σύνδεση πλοήγησης.
.nav-item {
/* Στυλ για στοιχεία μενού πλοήγησης */
}
.nav-link {
/* Στυλ για συνδέσμους πλοήγησης */
}
Χρησιμοποιώντας ακρωνύμια ή δημοφιλείς συντομογραφίες στο πλαίσιο του έργου, όπως π.χ nav Για πλοήγηση, μπορεί να κάνει τον κώδικα πολύ πιο εύκολο να κατανοήσουν οι άλλοι προγραμματιστές.
Βέλτιστες πρακτικές για την ονομασία κλάσεων και αναγνωριστικών CSS
Σε ένα έργο JavaScript, είναι σημαντικό να ονομάζουμε κατάλληλα κλάσεις και αναγνωριστικά CSS για αναγνωσιμότητα κώδικα, συντήρηση και επεκτασιμότητα.
Μπορείτε να απλοποιήσετε τα φύλλα στυλ και να βελτιώσετε την ποιότητα του κώδικα. Το να αφιερώσετε χρόνο για να ορίσετε καλές συμβάσεις ονομασίας θα αποδώσει μακροπρόθεσμα, καθιστώντας ευκολότερο για εσάς και τους άλλους να κατανοήσετε και να διατηρήσετε τη βάση κώδικα.
