Πώς να κάνετε τον κωδικό σας εύκολα διατηρητέο ​​με οδηγούς στυλ ζωής

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

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

Τι υπάρχει σε ένα ζωντανό οδηγό στυλ;

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

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

Ξεκινήστε τον δικό σας οδηγό στυλ διαβίωσης

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

Ξεκινήστε με το ίδρυμα

Τα συστατικά που χρησιμοποιείτε συχνά είναι τα καλύτερα που χρειάζεστε για έναν οδηγό στυλ ζωής, τα κουμπιά έρχονται στο μυαλό αμέσως. Μια σύντομη λίστα με πράγματα που μπορεί να θέλετε να λάβετε υπόψη είναι οι επιλογές διάταξης (ενδεχομένως ο σχεδιασμός ενός συστήματος πλέγματος), η τυπογραφία, η χρήση χρωμάτων, τα κουμπιά και τα στυλ συνδέσεων, το στυλ φόρμας, οι ειδοποιήσεις ή οι προειδοποιήσεις και η εμφάνιση του στυλ. Σχεδόν οτιδήποτε μπορεί να ωφεληθεί από την επαναχρησιμοποίηση θα μπορούσε να προστεθεί ουσιαστικά. Όταν περιγράφετε, θυμηθείτε να διατηρείτε τα πράγματα ευέλικτα. Ποτέ μην σχεδιάζετε μια ειδοποίηση ή κουμπί που να είναι συγκεκριμένη σε μία σελίδα ή σε μια περίπτωση χρήσης, εκτός εάν είναι απολύτως απαραίτητο. Αντ 'αυτού, προσθέστε τάξεις τροποποιητών για να βασιστείτε στα βασικά θεμέλια για πράγματα όπως χρώμα, τυπογραφία ή αισθητικές αλλαγές. Με αυτό τον τρόπο, μπορείτε πάντα να υπολογίζετε στην κλάση .button για να ορίσετε ένα σταθερό πλάτος, ύψος και μέγεθος κειμένου, επιτρέποντας στις κλάσεις τροποποιητών να αλλάζουν τα πράγματα ειδικά σε κάθε περίπτωση χρήσης.

Οι στόχοι του διατηρήσιμου κώδικα

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

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

Ονοματοδοσία συμβάσεων στο CSS

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

  / * Αυτή είναι μια κατηγορία συστατικών, θα πρέπει να περιέχει μόνο βασικούς κανόνες δομής * /. Αυτό το μοναδικό παράδειγμα χρήσης περιγράφει ένα κουμπί που χρησιμοποιείται στην αρχική σελίδα * / .page-cta-button {εμφάνιση: blockmargin: 0 auto 50px · width: 180px · height: 60px · line-height: 60px;} / * Παρακάτω υπάρχουν κατηγορίες τροποποιητών, για να προσθέσετε χρώμα ή άλλες αισθητικές αλλαγές * /. κόκκινο {φόντο: # C54F48} .περιεχόμενα {ακτίνα-ακτίνα: 5px;} 

Αυτοματοποιημένες λύσεις

Οι αυτοματοποιημένες γεννήτριες οδηγών στυλ έχουν αρχίσει να εμφανίζονται αριστερά και δεξιά για να βοηθήσουν την ώθηση για οδηγούς στυλ. Πρωτότυπο στυλ είναι μια γεννήτρια SASS που κατασκευάστηκε από τους Ram Richard και Mason Wendell της Ομάδα SASS . Είναι μια από τις καλύτερες επιλογές εκεί έξω αυτή τη στιγμή, με παρόμοιες γεννήτριες όπως Ολόγραμμα , Kalei , StyleDocco , και KSS επίσης αποδεικνύεται χρήσιμη.

Αυτοματοποιημένα vs χειροποίητα

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

Ελέγξτε τον κώδικα σας

Οι ιστότοποι δεν έχουν τελειώσει ποτέ. Τροποποιούμε τα πράγματα, τη μετάβαση σε νέα στυλ και τάσεις και στο τέλος μπορούμε να καταλήξουμε με πολλούς κώδικες από προηγούμενες αναθεωρήσεις. Είναι σημαντικό να αφιερώσετε μια στιγμή και να κοιτάξετε πίσω στο "τέλος" κάθε αναθεώρησης για να βεβαιωθείτε ότι τα πράγματα είναι τόσο καθαρά όσο μπορούν. Σε αυτό το σημείο, μου αρέσει επίσης να ρίχνω κάθε συστατικό (και τάξεις τροποποιητή) σε ένα Codepen για να δοκιμάσετε την υποστήριξη του προγράμματος περιήγησης και να κάνετε σημειώσεις ανάλογα. Αυτό θα μπορούσε να εξοικονομήσει τόνοι χρόνου αργότερα αν σχεδιάζετε μια σελίδα με περιορισμούς υποστήριξης. Κατά την ανασκόπηση, βεβαιωθείτε επίσης ότι προσέχετε τα στοιχεία που ενδέχεται να έρχονται σε σύγκρουση μεταξύ τους με περίεργους τρόπους ή να προκαλέσετε προβλήματα στο μοντέλο κουτιού.

συμπέρασμα

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

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

Προτεινόμενη εικόνα / μικρογραφία, εικόνα προγραμματισμού μέσω Shutterstock.