Συμβάσεις ονομάτων CSS που θα σας εξοικονομήσουν ώρες εντοπισμού σφαλμάτων

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

Κορεάτικα;

알림: 한국인 독자 분들 을 위해 본 기사 는 한국어 로 번역 되었으며, 한국어 버전 은 여기 에서 보실 수 있습니다

Το CSS δεν είναι η ομορφότερη «γλώσσα», αλλά έχει ενισχύσει επιτυχώς το στυλ του διαδικτύου για πάνω από 20 χρόνια τώρα. Δεν κάνω άσχημα, ε;

Ωστόσο, καθώς γράφετε περισσότερα CSS, βλέπετε γρήγορα ένα μεγάλο μειονέκτημα.

Είναι πολύ δύσκολο να διατηρηθεί το CSS.

Τα κακώς γραμμένα CSS θα μετατραπούν γρήγορα σε εφιάλτη.

Ακολουθούν μερικές συμβάσεις ονομασίας που θα σας εξοικονομήσουν λίγο άγχος και αμέτρητες ώρες.

Χρησιμοποιήστε συμβολοσειρές Hyphen Delimited

Εάν γράφετε πολλή JavaScript, τότε η γραφή μεταβλητών σε καμήλα είναι κοινή πρακτική.

var redBox = document.getElementById('...')

Τέλεια, σωστά;

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

Μην το κάνεις αυτό:

.redBox { border: 1px solid red;}

Αντ 'αυτού, κάντε το:

.red-box { border: 1px solid red;}

Αυτή είναι μια αρκετά τυπική σύμβαση ονοματοποίησης CSS. Είναι αναμφισβήτητα πιο ευανάγνωστο.

Επίσης, είναι συνεπές με τα ονόματα ιδιοτήτων CSS.

// Correct
.some-class { font-weight: 10em}
// Wrong
.some-class { fontWeight: 10em}

Η Σύμβαση Ονοματολογίας BEM

Οι ομάδες έχουν διαφορετικές προσεγγίσεις για τη σύνταξη επιλογών CSS. Ορισμένες ομάδες χρησιμοποιούν διαχωριστικά ενωτικών, ενώ άλλες προτιμούν να χρησιμοποιούν την πιο δομημένη σύμβαση ονομασίας που ονομάζεται BEM.

Γενικά, υπάρχουν 3 προβλήματα που προσπαθούν να επιλύσουν οι συμβάσεις ονομάτων CSS:

  1. Για να μάθετε τι κάνει ένας επιλογέας, απλά κοιτάζοντας το όνομά του
  2. Να έχετε μια ιδέα για το πού μπορεί να χρησιμοποιηθεί ένας επιλογέας, απλώς κοιτάζοντας τον
  3. Για να γνωρίζετε τις σχέσεις μεταξύ των ονομάτων τάξης, απλώς κοιτάζοντας τα

Έχετε δει ποτέ ονόματα τάξεων γραμμένα ως εξής:

.nav--secondary { ...}
.nav__header { ...}

Αυτή είναι η σύμβαση ονομασίας BEM.

Εξηγώντας BEM σε 5 χρονών

Η BEM προσπαθεί να χωρίσει τη συνολική διεπαφή χρήστη σε μικρά επαναχρησιμοποιήσιμα στοιχεία.

Εξετάστε την παρακάτω εικόνα:

Όχι, δεν είναι βραβευμένο :(

Το stick-man αντιπροσωπεύει ένα στοιχείο, όπως ένα μπλοκ σχεδίασης.

Ίσως έχετε ήδη μαντέψει ότι το B στο BEM σημαίνει «Block».

Στον πραγματικό κόσμο, αυτό το «μπλοκ» θα μπορούσε να αντιπροσωπεύει μια πλοήγηση ιστότοπου, κεφαλίδα, υποσέλιδο ή οποιοδήποτε άλλο μπλοκ σχεδίασης.

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

Το στοιχείο θα πρέπει να έχει στυλ έτσι:

.stick-man { }

Έχουμε χρησιμοποιήσει οριοθετημένες χορδές εδώ. Καλός!

E για στοιχεία

Το E στο «BEM» σημαίνει Elements.

Συνολικά, τα μπλοκ του σχεδιασμού σπάνια ζουν απομονωμένα.

Για παράδειγμα, το stick-man έχει ένα head, δύο πανέμορφα armsκαι feet.

Το head, feetκαι armsείναι όλα τα στοιχεία του στοιχείου. Μπορούν να θεωρηθούν ως παιδικά συστατικά, δηλαδή παιδιά του συνολικού γονικού συστατικού.

Χρησιμοποιώντας τη σύμβαση ονομασίας BEM, τα ονόματα κλάσης στοιχείων προέρχονται προσθέτοντας δύο κάτω παύλες, ακολουθούμενες από το όνομα του στοιχείου.

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

.stick-man__head {
}
.stick-man__arms {
}
.stick-man__feet {
}

M για τροποποιητές

Το M στο «BEM» σημαίνει τροποποιητές.

Τι γίνεται αν το stick-man τροποποιήθηκε και θα μπορούσαμε να έχουμε ένα blueή redstickman;

Στον πραγματικό κόσμο, αυτό θα μπορούσε να είναι ένα redκουμπί ή blueκουμπί. Αυτές είναι τροποποιήσεις του εν λόγω στοιχείου.

Χρησιμοποιώντας το BEM, τα ονόματα τάξης τροποποιητών προέρχονται προσθέτοντας δύο ενωτικά ακολουθούμενα από το όνομα του στοιχείου.

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

.stick-man--blue {
}
.stick-man--red {
}

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

Τι θα γινόταν αν είχαμε ραβδιά διαφορετικών headμεγεθών;

Αυτή τη φορά το στοιχείο έχει τροποποιηθεί. Θυμηθείτε, το στοιχείο είναι ένα θυγατρικό στοιχείο στο συνολικό μπλοκ που περιέχει

Το .stick-manαντιπροσωπεύει το Block, .stick-man__headτο στοιχείο.

Όπως φαίνεται στο παραπάνω παράδειγμα, οι διπλές παύλες μπορούν επίσης να χρησιμοποιηθούν έτσι:

.stick-man__head--small {
}
.stick-man__head--big {
}

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

Τώρα το έχετε.

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

Προσωπικά, τείνω να χρησιμοποιώ μόνο ονόματα κλάσης ενδιάμεσου διαχωριστή για απλά έργα και BEM για πιο διεπαφές χρήστη

Μπορείτε να διαβάσετε περισσότερα για το BEM.

BEM - Block Element Modifier

BEM - Block Element Modifier είναι μια μεθοδολογία που σας βοηθά να επιτύχετε επαναχρησιμοποιήσιμα στοιχεία και κοινή χρήση κώδικα στο… getbem.com

Γιατί να χρησιμοποιήσετε συμβάσεις ονομασίας;

Υπάρχουν μόνο δύο σκληρά προβλήματα στην Επιστήμη των Υπολογιστών: ακύρωση της προσωρινής μνήμης και ονομασία πραγμάτων - Phil Karlton

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

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

Εάν επιλέξετε να χρησιμοποιήσετε τη σύμβαση ονομασίας BEM, θα γίνει ευκολότερο να δείτε τη σχέση μεταξύ των στοιχείων / μπλοκ του σχεδιασμού σας απλώς κοιτάζοντας τη σήμανση.

Νιώθετε αυτοπεποίθηση;

Ονόματα CSS με γάντζους JavaScript

Σήμερα είναι η πρώτη μέρα του John στη δουλειά.

Του παραδίδεται ένας HTMLκωδικός που μοιάζει με αυτόν:

Ο Τζον έχει διαβάσει αυτό το άρθρο και συνειδητοποιεί ότι αυτός μπορεί να μην είναι ο καλύτερος τρόπος για να ονομάσετε πράγματα CSS. Προχωρά λοιπόν και αναδιαμορφώνει τη βάση κώδικα ως εξής:

Φαίνεται καλό, ε;

Άγνωστος στον Τζον, είχε σπάσει τη βάση κώδικα ???

Πως?

Κάπου στον κώδικα JavaScript, υπήρχε μια σχέση με το προηγούμενο όνομα της κλάσης, siteNavigation:

//the Javasript code
const nav = document.querySelector('.siteNavigation')

Έτσι, με την αλλαγή στο όνομα της τάξης, η navμεταβλητή έγινε null.

Πόσο θλιβερό.

Για να αποφευχθούν τέτοιες περιπτώσεις, οι προγραμματιστές έχουν βρει διαφορετικές στρατηγικές.

1. Χρησιμοποιήστε ονόματα κλάσης js

Ένας τρόπος για να μετριάσετε τέτοια σφάλματα είναι να χρησιμοποιήσετε ένα js-*όνομα κλάσης για να υποδηλώσει μια σχέση με το εν λόγω στοιχείο DOM.

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

Και στον κώδικα JavaScript:

//the Javasript code
const nav = document.querySelector('.js-site-navigation')

Ως σύμβαση, όποιος βλέπει το js-site-navigationόνομα της τάξης θα καταλάβει ότι υπάρχει σχέση με αυτό το στοιχείο DOM στον κώδικα JavaScript.

2. Χρησιμοποιήστε το χαρακτηριστικό Rel

Δεν χρησιμοποιώ αυτήν την τεχνική μόνοι μου, αλλά έχω δει ανθρώπους να το κάνουν.

Το αναγνωρίζετε αυτό;

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

Στο προηγούμενο παράδειγμα με τον John, οι υποστηρικτές αυτής της τεχνικής θα το έκαναν:

Και στο JavaScript:

const nav = document.querySelector("[rel='js-site-navigation']")

Έχω τις αμφιβολίες μου σχετικά με αυτήν την τεχνική, αλλά είναι πιθανό να την βρείτε σε ορισμένες βάσεις κώδικα. Ο ισχυρισμός εδώ είναι, "καλά, υπάρχει σχέση με το Javascript, οπότε χρησιμοποιώ το χαρακτηριστικό rel για να το δηλώσω" .

Ο ιστός είναι ένα μεγάλο μέρος με πολλές διαφορετικές «μεθόδους» για την επίλυση του ίδιου προβλήματος.

3. Μην χρησιμοποιείτε χαρακτηριστικά δεδομένων

Ορισμένοι προγραμματιστές χρησιμοποιούν χαρακτηριστικά δεδομένων ως αγκύρια JavaScript. Αυτό δεν είναι σωστό. Εξ ορισμού, τα χαρακτηριστικά δεδομένων χρησιμοποιούνται για την αποθήκευση προσαρμοσμένων δεδομένων .

Επεξεργασία # 1: Όπως ανέφεραν ορισμένοι καταπληκτικοί άνθρωποι στην ενότητα σχολίων, εάν οι χρήστες χρησιμοποιούν το χαρακτηριστικό «rel», τότε ίσως είναι εντάξει να χρησιμοποιούν χαρακτηριστικά δεδομένων σε ορισμένες περιπτώσεις. Είναι η κλήση σου.

Συμβουλή μπόνους: Γράψτε περισσότερα σχόλια CSS

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

Ενώ πολλοί προγραμματιστές ιστού προσπαθούν να ΔΕΝ γράφουν σχόλια JavaScript ή να κολλάνε σε μερικά, νομίζω ότι πρέπει να γράψετε περισσότερα σχόλια CSS.

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

Δεν πονάει.

Ρίξτε μια ματιά στο πόσο καλά σχολιάστηκε ο πηγαίος κώδικας Bootstrap.

Δεν χρειάζεται να γράψετε σχόλια για να πείτε ότι color: redθα δώσει κόκκινο χρώμα. Ωστόσο, εάν χρησιμοποιείτε ένα κόλπο CSS που είναι λιγότερο προφανές, μη διστάσετε να γράψετε ένα σχόλιο.

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

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