Πώς να βελτιστοποιήσετε το CSS με οδηγούς στυλ κώδικα

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

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

Η τοποθέτηση των κατάλληλων οδηγών στυλ κώδικα στη χρήση μας παρέχει ένα πιο οργανωμένη, σταθερή βάση κώδικα, βελτιωμένη αναγνωσιμότητα κώδικα και πιο διατηρήσιμο κώδικα. Δεν είναι τυχαίο ότι οι μεγάλες εταιρείες τεχνολογίας, όπως το Google, το AirBnB ή το Dropbox, κάνουν καλή χρήση τους.

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

Οδηγός στυλ κώδικα έναντι βιβλιοθηκών πρότυπων

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

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

Και οι δύο οδηγοί στυλ κώδικα και βιβλιοθήκες προτύπων περιλαμβάνουν μια στρατηγική σχεδιασμού, αλλά ένα διαφορετικό είδος. Οι βιβλιοθήκες μοτίβων, όπως το Bootstrap, το Zurb Foundation, η Γλώσσα Global Experience του BBC ή η βιβλιοθήκη μοτίβου του MailChimp, μας παρέχουν ένα περιβάλλον χρήστη με προχωρημένους κλάδους CSS, τυπογραφία, χρωματική απεικόνιση, μερικές φορές ένα σύστημα πλέγματος και άλλα σχέδια σχεδίασης.

Οι οδηγοί στυλ CSS κώδικα, όπως οι Evernote ή ThinkUp (ή αυτοί που αναφέρονται στην εισαγωγή) περιέχουν κανόνες σχετικά με τον τρόπο γραφής του CSS συμπεριλαμβανομένων των πραγμάτων συμβάσεις ονομασίας, δομή αρχείου, σειρά εντολών, μορφοποίηση κώδικα, και άλλοι.

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

Δημιουργήστε τον οδηγό στυλ κώδικα CSS

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

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

Για παράδειγμα, το AirBnB δείχνει καλά και κακά παραδείγματα στους προγραμματιστές με τον ακόλουθο εύκολα εύπεπτο τρόπο:

Δομή αρχείου

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

Ορισμένοι οδηγοί στυλ όπως το ThinkUp, μας προειδοποιούν επίσης που δεν χρησιμοποιούν ενσωματωμένα στυλ εκτός αν είναι αναπόφευκτη. είναι επίσης ένας χρήσιμος κανόνας που αξίζει να εφαρμοστεί.

Φωτισμός

Η ανίχνευση είναι ένα μεγάλο χαρακτηριστικό στο CSS, αλλά μερικές φορές μπορεί να ξεφύγει από τον έλεγχο. Κανείς δεν αισθάνεται ιδιαίτερα ευτυχισμένος, ειδικά στη μέση μιας απογοητευτικής διαδικασίας εντοπισμού σφαλμάτων, προσκρούει σε επιμήκεις επιλογείς όπως αυτό:

 .class_1 .class_2 # id_1 # id_2 li span χρώμα: #bad; 

Έτσι είναι πάντα καλό ορίστε ένα λογικό όριο φωλιάσματος, για παράδειγμα το GitHub επέλεξε τρία επίπεδα στον οδηγό του στυλ. Περιορίζοντας τη φωλιά, μπορούμε επίσης να αναγκάσουμε να γράψουμε έναν καλύτερο δομημένο κώδικα.

Κανόνες ονομάτων

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

Τα τέσσερα κοινά στυλ που χρησιμοποιούνται στην ονομασία επιλογής είναι .πεζά γράμματα, .under_scores, .dash-es, και .lowerCamelCase. Είναι εντάξει να επιλέξετε κάποιο από αυτά, αλλά πρέπει να ακολουθήσουμε την ίδια λογική σε ολόκληρο το έργο.

Χρησιμοποιώντας μόνο ονόματα σημασιολογικών επιλογών είναι επίσης απαραίτητο αν θέλουμε να έχουν νόημα κώδικα. Για παράδειγμα, αντί για .κόκκινο κουμπί (που δεν δείχνει τι κάνει το κουμπί), είναι καλύτερο να χρησιμοποιήσετε το .κουμπί ειδοποίησης όνομα (που λέει τι κάνει), επιτρέποντας έτσι στους προγραμματιστές (και στον μελλοντικό μας εαυτό) να κατανοήσουν τι λέει το κουμπί.

Εξάλλου εάν θέλουμε να αλλάξουμε το χρώμα από το κόκκινο σε κάτι άλλο στο μέλλον, μπορούμε εύκολα να το κάνουμε χωρίς παρενόχληση. Υπάρχουν επίσης πρόθετες συμβάσεις ονομασίας CSS, όπως η σύμβαση BEM (Block, Element, Modifier), η οποία οδηγούν σε μια σταθερή δομή ονομασίας με μοναδικά και ουσιαστικά ονόματα.

Κανόνες μορφοποίησης

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

Το Dropbox, για παράδειγμα, απαιτεί από τους προγραμματιστές να τοποθετήσουν κενά μετά το παχύ τελεία στις δηλώσεις ιδιότητας, ενώ το Evernote χρησιμοποιεί δύο κενά για εσοχή. Μπορούμε να δημιουργήσουμε πολλούς κανόνες μορφοποίησης, όπως είμαστε άνετοι, αλλά ποτέ περισσότερο από ό, τι είναι δυνατό να κατανοήσουμε.

Εντολή δήλωσης

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

Ρίξτε μια ματιά, για παράδειγμα, τους κανόνες παραγγελίας της ιδιοκτησίας του WordPress, ορίζει την ακόλουθη απλή αλλά λογική γραμμή βάσης για την παραγγελία σε ποιες ιδιότητες ομαδοποιούνται ανάλογα με τη σημασία τους:

1. Απεικόνιση
2. Θέση
3. Μοντέλο κουτιού
4. Χρώματα και τυπογραφία
5. Αλλα

Μονάδες και τιμές

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

Φανταστείτε μια τοποθεσία που χρησιμοποιεί εναλλακτικά px, em, και rem μετρήσεις μήκους. Δεν θα φαίνεται μόνο κακό στον επεξεργαστή κώδικα, αλλά πιθανότατα κάποια στοιχεία θα είναι εκπληκτικά μικρά ή μεγάλα σε αυτόν τον ιστότοπο.

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

.τάξη // καλό περιθώριο: 0; // κακό περιθώριο: 0px; // κακό περιθώριο: 0em; // κακό περιθώριο: 0rem; 

Σχολιάζοντας

Ο κωδικός σχολιασμού είναι απαραίτητος σε όλες τις γλώσσες, αλλά στο CSS δεν διευκολύνει μόνο την εκτέλεση εντοπισμού σφαλμάτων και την τεκμηρίωση, αλλά και τα τμήματα των κανόνων CSS σε λογικές ομάδες. Μπορούμε να χρησιμοποιήσουμε είτε το / * ... * / ή το // ... στυλ συμβολισμού για σχόλια σε CSS, το σημαντικό είναι να παραμείνετε συνεπείς με σχόλια σε όλο το έργο μας.

Για παράδειγμα, το Idiomatic CSS δημιουργεί ένα σημαντικό σύστημα σχολιασμού που χρησιμοποιεί ακόμη και κάποια βασική τεχνολογία ASCII και έχει ως αποτέλεσμα έναν όμορφα οργανωμένο κώδικα: