Πώς να Refactor CSS - Ένας οδηγός

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

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

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

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

1. Διεξάγετε έναν αρχικό έλεγχο

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

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

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

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

2. Ορίστε ένα διαχειρίσιμο σχέδιο

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

Στο CSS refactoring υπάρχει ένα κρίσιμο πράγμα που πάντα πρέπει να λάβουμε υπόψη: μερικά πράγματα που επαναπροσδιορίζουμε, π.χ. αλλάζοντας τα ονόματα των επιλογών, θα το κάνει είναι απαραίτητο να προσαρμόσετε τον κώδικα των σχετικών αρχείων HTML και JavaScript επισης.

Είναι λοιπόν καλή ιδέα εντοπίστε τις πρόσθετες τροποποιήσεις που θα χρειαστεί να εκτελέσετε, και να τα χτίσετε στο πρόγραμμα refactoring μαζί με τα κύρια καθήκοντα που σχετίζονται με το CSS.

3. Παρακολούθηση της εξέλιξης

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

4. Προσέξτε σε έναν οδηγό στυλ κωδικοποίησης

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

Τα σημαντικά πράγματα που πρέπει να αποφασίσουμε είναι:

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

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

Δεν είναι αρκετό όμως να εισαγάγουμε έναν οδηγό στυλ κωδικοποίησης, πρέπει επίσης να το κάνουμε να το κολλήσουμε όταν ξαναγράψουμε τον κώδικα κατά τη διάρκεια του refactoring, και περιμένετε το ίδιο από όλους τους άλλους ο οποίος εργάζεται στο έργο μας.

5. Ορίστε μια συνεκτική δομή αρχείου

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

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

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

6. Να απαλλαγείτε από τους αχρησιμοποίητους και τους διπλότυπους κανόνες

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

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

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

Μαζί με τους ξεπερασμένους κανόνες, οι διπλοί κανόνες οδηγούν επίσης σε περιττό κτύπημα κώδικα και απώλεια απόδοσης. Μπορούμε να τα αφαιρέσουμε χρησιμοποιώντας τη μονάδα CSS Purge Node.js, αλλά μπορούμε επίσης να συνεργαστούμε CSS linters για την αναζήτηση διπλών κανόνων στα αρχεία CSS.

7. Μειώστε την ειδικότητα

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

Η μικρότερη ειδικότητα (0001) ανήκει σε επιλογείς που στοχεύουν μόνο ένα γενικό στοιχείο HTML, όπως το

ή

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

Ορισμένοι επιλογείς, όπως ταυτότητα ή οι επιλογείς που προέρχονται από inline styles, έχουν υψηλότερες προτεραιότητες, επειδή παρακάμπτουν τα στυλ που ανήκουν σε γενικότερους επιλογείς. Για παράδειγμα, η ιδιαιτερότητα του # id1 επιλογέας είναι 0100.

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

Οι 3 κύριοι τύποι επιλογέων υψηλής ειδικότητας είναι:

1. Ειδικοί επιλογείς, όπως p.class1 (ορίζοντας το Π η ετικέτα δεν είναι απαραίτητη εδώ, καθώς καθιστά αδύνατη τη χρήση της ίδιας κλάσης με άλλα στοιχεία HTML)
2. Βαθιά ένθετοι επιλογείς, όπως .class1 .class2 .class3 .class4 ...
3. IDs, όπως # id1

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

8. Βγάλτε έξω !σπουδαίος Κανόνες

CSS κανόνες που ακολουθούνται από το !σπουδαίος κατάσταση αντικατάστασης των κανόνων κανονικού στυλ. Χρησιμοποιώντας !σπουδαίος αργά ή γρήγορα οδηγούν σε ασυνάρτητο κώδικα. Δεν είναι σύμπτωση τα περισσότερα εργαλεία χαλάρωσης τα χαρακτηρίζουν ως λάθος.

Όταν πρέπει να γράψουμε το CSS γρήγορα, ίσως αρχίσουμε να το βασιζόμαστε αν και λόγω της απλότητας τους.

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

9. Καθαρίστε τους μαγικούς αριθμούς και τις σκληρές κωδικοποιημένες τιμές

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

 .class1 θέση: απόλυτη; κορυφή: 28px; αριστερά: 15,5%. 

Το κύριο πρόβλημα με τους μαγικούς αριθμούς είναι ότι είναι λεπτομερής, και ενσωματώνουν το “προγραμματισμός με μετάθεση” αντίθετη. Κατά τη διαδικασία refactoring πρέπει να καταργήσουμε αυτούς τους αυθαίρετους κανόνες από τον κώδικα μας και να τις αντικαταστήσουμε με πιο λογικές λύσεις όπου είναι δυνατόν.

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

 / * κακό, θα χρειαστεί να προσθέσουμε επιπλέον κανόνες σταθερού ύψους γραμμής στα υποκείμενα στοιχεία του .class1 * / .class1 font-size: 20px; γραμμή-ύψος: 24px;  / * καλό, ο ευέλικτος κανόνας ύψους γραμμής μπορεί να χρησιμοποιηθεί με ασφάλεια και από τα παιδικά στοιχεία * / .class1 font-size: 20px; ύψος γραμμής: 1,2; 

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

10. Μονάδες και τιμές αντιδραστηρίων

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

Εάν τα χρησιμοποιούσαμε κατά τρόπο ασυντόνιστο στο παρελθόν, πρέπει να τα μετατρέψουμε ώστε να μπορούν να αποτελέσουν ένα συνοπτικό σύστημα

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