Πλησιάζω

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

Βλέπετε κάτι που δεν ακούγεται σωστά ή ίσως θα μπορούσε να γίνει καλύτερα; Ανοίξτε ένα θέμα —θα θέλαμε να το συζητήσουμε μαζί σας.

Περίληψη

Θα βουτήξουμε σε καθένα από αυτά περισσότερο καθ' όλη τη διάρκεια, αλλά σε υψηλό επίπεδο, εδώ είναι αυτό που καθοδηγεί την προσέγγισή μας.

• Τα στοιχεία θα πρέπει να αποκρίνονται και να προστατεύονται από κινητά
• Τα στοιχεία πρέπει να είναι κατασκευασμένα με βασική κλάση και να επεκτείνονται μέσω κλάσεων τροποποιητών
• Οι καταστάσεις των στοιχείων θα πρέπει να υπακούουν σε μια κοινή κλίμακα δείκτη z
• Όποτε είναι δυνατόν, προτιμήστε μια υλοποίηση HTML και CSS από την JavaScript
• Όποτε είναι δυνατόν, χρησιμοποιήστε βοηθητικά προγράμματα πάνω από προσαρμοσμένα στυλ
• Όποτε είναι δυνατόν, αποφύγετε την επιβολή αυστηρών απαιτήσεων HTML (παιδικοί επιλογείς)

Ευαίσθητος

Τα στυλ απόκρισης του Bootstrap είναι φτιαγμένα για να ανταποκρίνονται, μια προσέγγιση που συχνά αναφέρεται ως mobile-first . Χρησιμοποιούμε αυτόν τον όρο στα έγγραφά μας και συμφωνούμε σε μεγάλο βαθμό με αυτόν, αλλά μερικές φορές μπορεί να είναι πολύ ευρύς. Αν και δεν πρέπει κάθε στοιχείο να ανταποκρίνεται εξ ολοκλήρου στο Bootstrap, αυτή η αποκριτική προσέγγιση αφορά τη μείωση των παρακάμψεων CSS, ωθώντας σας να προσθέσετε στυλ καθώς η θύρα προβολής γίνεται μεγαλύτερη.

Σε όλο το Bootstrap, θα το δείτε πιο ξεκάθαρα στα ερωτήματά μας για τα μέσα. Στις περισσότερες περιπτώσεις, χρησιμοποιούμε min-widthερωτήματα που αρχίζουν να εφαρμόζονται σε ένα συγκεκριμένο σημείο διακοπής και συνεχίζονται στα υψηλότερα σημεία διακοπής. Για παράδειγμα, το α .d-noneισχύει από min-width: 0το άπειρο. Από την άλλη πλευρά, το α .d-md-noneισχύει από το μεσαίο σημείο διακοπής και πάνω.

Κατά καιρούς θα χρησιμοποιούμε max-widthόταν το απαιτεί η εγγενής πολυπλοκότητα ενός στοιχείου. Μερικές φορές, αυτές οι παρακάμψεις είναι λειτουργικά και διανοητικά πιο σαφείς στην εφαρμογή και υποστήριξη από την επανεγγραφή της βασικής λειτουργικότητας από τα στοιχεία μας. Προσπαθούμε να περιορίσουμε αυτή την προσέγγιση, αλλά θα τη χρησιμοποιούμε από καιρό σε καιρό.

Τάξεις

Εκτός από το Reboot μας, ένα φύλλο στυλ κανονικοποίησης μεταξύ προγραμμάτων περιήγησης, όλα τα στυλ μας στοχεύουν στη χρήση κλάσεων ως επιλογείς. Αυτό σημαίνει την απομάκρυνση από επιλογείς τύπου (π.χ., input[type="text"]) και ξένες γονικές κατηγορίες (π.χ., .parent .child) που κάνουν τα στυλ πολύ συγκεκριμένα για να παρακάμπτονται εύκολα.

Ως εκ τούτου, τα εξαρτήματα θα πρέπει να είναι κατασκευασμένα με μια βασική κλάση που να φιλοξενεί κοινά, που δεν πρέπει να παρακαμφθούν ζεύγη ιδιοτήτων-τιμών. Για παράδειγμα, .btnκαι .btn-primary. Χρησιμοποιούμε .btnγια όλα τα κοινά στυλ όπως display, padding, και border-width. Στη συνέχεια χρησιμοποιούμε τροποποιητές όπως .btn-primaryγια να προσθέσουμε το χρώμα, το χρώμα φόντου, το χρώμα περιγράμματος κ.λπ.

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

ζ-δείκτες κλίμακες

Υπάρχουν δύο z-indexκλίμακες στο Bootstrap—στοιχεία σε ένα στοιχείο και στοιχεία επικάλυψης.

Συστατικά στοιχεία

• Ορισμένα στοιχεία στο Bootstrap είναι κατασκευασμένα με αλληλοκαλυπτόμενα στοιχεία για την αποφυγή διπλών περιγραμμάτων χωρίς τροποποίηση της borderιδιότητας. Για παράδειγμα, ομάδες κουμπιών, ομάδες εισόδου και σελιδοποίηση.
• Αυτά τα εξαρτήματα μοιράζονται μια τυπική z-indexκλίμακα 0διαμέσου 3.
• 0είναι προεπιλογή (αρχική), 1είναι :hover, 2είναι :active/ .active, και 3είναι :focus.
• Αυτή η προσέγγιση ταιριάζει με τις προσδοκίες μας για την υψηλότερη προτεραιότητα χρήστη. Εάν ένα στοιχείο είναι εστιασμένο, είναι στη θέα και στην προσοχή του χρήστη. Τα ενεργά στοιχεία είναι τα δεύτερα υψηλότερα επειδή υποδεικνύουν την κατάσταση. Το δείκτη του ποντικιού είναι το τρίτο υψηλότερο επειδή υποδεικνύει την πρόθεση του χρήστη, αλλά σχεδόν οτιδήποτε μπορεί να τοποθετηθεί.

Στοιχεία επικάλυψης

Το Bootstrap περιλαμβάνει διάφορα στοιχεία που λειτουργούν ως επικάλυψη κάποιου είδους. Αυτό περιλαμβάνει, κατά σειρά υψηλότερου z-index, αναπτυσσόμενα μενού, σταθερές και κολλώδεις γραμμές πλοήγησης, modal, συμβουλές εργαλείων και popovers. Αυτά τα στοιχεία έχουν τη δική τους z-indexκλίμακα που αρχίζει στο 1000. Αυτός ο αρχικός αριθμός επιλέχθηκε αυθαίρετα και χρησιμεύει ως ένα μικρό buffer μεταξύ των στυλ μας και των προσαρμοσμένων στυλ του έργου σας.

Κάθε στοιχείο επικάλυψης αυξάνει z-indexελαφρώς την τιμή του με τέτοιο τρόπο ώστε οι κοινές αρχές διεπαφής χρήστη να επιτρέπουν τα στοιχεία που εστιάζουν στον χρήστη ή τα αιωρούμενα στοιχεία να παραμένουν πάντα ορατά. Για παράδειγμα, ένα modal είναι ο αποκλεισμός εγγράφων (π.χ., δεν μπορείτε να κάνετε καμία άλλη ενέργεια εκτός από την ενέργεια του modal), επομένως το βάζουμε πάνω από τις γραμμές πλοήγησης.

Μάθετε περισσότερα για αυτό στη z-indexσελίδα διάταξης μας .

HTML και CSS πάνω από JS

Όποτε είναι δυνατόν, προτιμούμε να γράφουμε HTML και CSS έναντι JavaScript. Γενικά, το HTML και το CSS είναι πιο παραγωγικά και προσβάσιμα σε περισσότερους ανθρώπους όλων των διαφορετικών επιπέδων εμπειρίας. Το HTML και το CSS είναι επίσης πιο γρήγορα στο πρόγραμμα περιήγησής σας από το JavaScript και το πρόγραμμα περιήγησής σας παρέχει γενικά μεγάλη λειτουργικότητα για εσάς.

Αυτή η αρχή είναι η πρώτης τάξεως JavaScript API που χρησιμοποιεί dataχαρακτηριστικά. Δεν χρειάζεται να γράψετε σχεδόν οποιαδήποτε JavaScript για να χρησιμοποιήσετε τα πρόσθετα JavaScript. Αντίθετα, γράψτε HTML. Διαβάστε περισσότερα για αυτό στη σελίδα επισκόπησης JavaScript .

Τέλος, τα στυλ μας βασίζονται στις θεμελιώδεις συμπεριφορές κοινών στοιχείων ιστού. Όποτε είναι δυνατόν, προτιμούμε να χρησιμοποιούμε αυτό που παρέχει το πρόγραμμα περιήγησης. Για παράδειγμα, μπορείτε να βάλετε μια .btnκλάση σε σχεδόν οποιοδήποτε στοιχείο, αλλά τα περισσότερα στοιχεία δεν παρέχουν καμία σημασιολογική τιμή ή λειτουργία προγράμματος περιήγησης. Αντίθετα, χρησιμοποιούμε <button>s και <a>s.

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

Βοηθητικά προγράμματα

Οι τάξεις βοηθητικών προγραμμάτων—πρώην βοηθοί στο Bootstrap 3—είναι ένας ισχυρός σύμμαχος στην καταπολέμηση του bloat CSS και της κακής απόδοσης σελίδας. Μια κλάση χρησιμότητας είναι τυπικά ένα μοναδικό, αμετάβλητο ζεύγος ιδιότητας-τιμής που εκφράζεται ως κλάση (π.χ. .d-blockαντιπροσωπεύει display: block;). Το κύριο ενδιαφέρον τους είναι η ταχύτητα χρήσης κατά τη σύνταξη HTML και ο περιορισμός της ποσότητας προσαρμοσμένου CSS που πρέπει να γράψετε.

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

Ευέλικτο HTML

Αν και δεν είναι πάντα δυνατό, προσπαθούμε να αποφύγουμε να είμαστε υπερβολικά δογματικοί στις απαιτήσεις HTML για τα στοιχεία. Έτσι, εστιάζουμε σε μεμονωμένες τάξεις στους επιλογείς CSS μας και προσπαθούμε να αποφύγουμε τους επιλογείς άμεσων παιδιών ( >). Αυτό σας δίνει μεγαλύτερη ευελιξία στην υλοποίησή σας και βοηθά να διατηρήσουμε το CSS μας πιο απλό και λιγότερο συγκεκριμένο.

Κώδικες συμβάσεις

Ο Οδηγός κώδικα (από τον συνδημιουργό του Bootstrap, @mdo) τεκμηριώνει τον τρόπο με τον οποίο γράφουμε το HTML και το CSS μας στο Bootstrap. Καθορίζει οδηγίες για γενική μορφοποίηση, προεπιλογές κοινής λογικής, παραγγελίες ιδιοτήτων και χαρακτηριστικών και πολλά άλλα.

Χρησιμοποιούμε το Stylelint για να επιβάλλουμε αυτά τα πρότυπα και πολλά άλλα στο Sass/CSS μας. Η προσαρμοσμένη μας διαμόρφωση Stylelint είναι ανοιχτού κώδικα και είναι διαθέσιμη για χρήση και επέκταση από άλλους.

Χρησιμοποιούμε vnu-jar για την επιβολή τυπικού και σημασιολογικού HTML, καθώς και για τον εντοπισμό κοινών σφαλμάτων.