Δημιουργία του συστήματος "Τέλεια" CSS

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

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

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

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

Αφήστε στην άκρη αφιερωμένο brainstorm και χρόνο έρευνας πριν από την κωδικοποίηση

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

Μερικά πράγματα που θα θέλετε να αναθεωρήσετε για το σχέδιο δράσης σας:

  • Συμβάσεις ονοματολογίας
  • BEM, SMACSS και οποιεσδήποτε τροποποιήσεις σε αυτά που θέλετε να συμπεριλάβετε
  • Τι επέκταση γλώσσας φύλλου στυλ CSS θέλετε να χρησιμοποιήσετε
  • CSS Modules with React?
  • Sass, Λιγότερο, κανένα;
  • Αρχιτεκτονική αρχείων
  • Atomic CSS, ITCSS, τη δική σας φανταχτερή δομή
  • CSS πλαίσια
  • Bootstrap, Framework, ένα απλό σπιτικό πλέγμα
  • Πλαίσια Javascript και εναλλακτικούς τρόπους στυλ
  • React, γωνιακό, PostCSS, CSS πλέγμα, κλπ ..

Πάρτε το buy-in νωρίς και προετοιμαστείτε για συμβιβασμό

Η απόκτηση άλλων προγραμματιστών και σχεδιαστών να χρησιμοποιούν τους τυποποιημένους κανόνες είναι απαραίτητη. Όταν ξεκινάτε ένα έργο, πάρτε τους προγραμματιστές επί του σκάφους σας με τις συμβάσεις σας CSS, JS και ακόμη και HTML από την αρχή. Γνωρίστε νωρίς και συχνά για να συζητήσετε κάθε βιβλιοθήκη, πλαίσιο, πνευματικό μοντέλο και στολίδι σας ενδιαφέρει να χρησιμοποιήσετε και να λάβετε σχόλια σοβαρά. Με απλά λόγια, αν μισούν απόλυτα το BEM και αρνούνται να το γράψουν, μην χρησιμοποιήσετε BEM. Μπορείτε να εξερευνήσετε την εργασία γύρω από αυτό με linters, αλλά αναγκάζοντας τους ανθρώπους να χρησιμοποιούν μια ονομασία σύμβαση που μισούν δεν πρόκειται να κάνει τη δουλειά σας πιο εύκολη. Ας ελπίσουμε ότι θα είστε σε θέση να τους πείσετε γιατί οι επιπλέον υπογράμμισες είναι χρήσιμες, αλλά η εξεύρεση ενός μεσαίου εδάφους όπου όλοι θα συμμετέχουν σε κάποιο είδος συστήματος είναι η προτεραιότητα.

Για παράδειγμα, όταν εξηγούσα την αρχιτεκτονική μου και τις συμβάσεις ονοματοδοσίας για το Partner's Directory σε άλλο προγραμματιστή, βρήκαμε μία από αυτές τις συμβιβαστικές στιγμές. Της ζήτησα να χρησιμοποιήσει το BEM, τη σημασιολογική ονομασία, να στηριχτεί σε μεγάλο βαθμό στους βοηθούς κλπ. Συμφώνησε και στη συνέχεια πρότεινε να γράψουμε ιδιότητες CSS με αλφαβητική σειρά. Προσωπικά προτιμώ να αναφέρουμε πράγματα με λειτουργική ομαδοποίηση, αλλά η αλφαβητική διάταξη είναι μια κληροδοτημένη σύμβαση κωδικοποίησης στο Gusto. Με την παραίτηση από την προσωπική προτίμηση, ήταν εύκολο να συμβιβαστούμε υπό το φως των μεγαλύτερων συστηματικών προτύπων που ελπίζω να επιτύχει.

Στερεώστε το έδαφος στις πιο εντυπωσιακές στιγμές

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

Ένα παράδειγμα θα είναι το Bootstrap. Μην με πάρτε λάθος, front-end πλαίσια και βιβλιοθήκες είναι μεγάλη, ωστόσο μπορούν να οδηγήσουν σε υπερβολικό κωδικό bloat όταν χρησιμοποιείται υπερβολικά ελεύθερα. Χρησιμοποιούμε το Bootstrap (κυρίως το πλέγμα) στις κωδικές βάσεις μας, επειδή είναι ευρέως γνωστό και εύκολο να συνεργαστεί με τους περισσότερους προγραμματιστές και σχεδιαστές. Είναι αμφισβητήσιμο εάν οι εταιρείες με devs front-end θα πρέπει να χρησιμοποιούν το Bootstrap καθόλου, καθώς έχει πάνω από 10.000 γραμμές κώδικα (150.000 χαρακτήρες!) Και το μεγαλύτερο μέρος αυτού του κώδικα στυλ δεν χρησιμοποιείται σε ένα εμπορικό σήμα. Για παράδειγμα, το styling κουμπιού Bootstrap είναι άσκοπο και επαναλαμβανόμενο αν κωδικοποιείτε το δικό σας σύστημα κουμπιών. Είναι ένα εξαιρετικό εργαλείο για προγραμματιστές που θέλουν να γυαλίσουν τις εφαρμογές τους, αλλά στην περίπτωσή μας, δεν απαιτείται η χρήση ολόκληρης της βιβλιοθήκης Bootstrap.

Από νωρίτερα στον κατάλογο των συνεργατών μου διέλυσα το δίκτυο, τα μέσα μαζικής ενημέρωσης και τα αρχεία εμφάνισης από το Bootstrap 4 στον κατάλογο Sass. Λίγες εβδομάδες αργότερα είδα ότι το gem Bootstrap είχε συμπεριληφθεί από έναν καλοπροαίρετο προγραμματιστή ο οποίος δεν κατάλαβε γιατί δεν είχα προσθέσει παρά μόνο μερικά αρχεία κώδικα Bootstrap στο repo. Μετά από μια φιλική, αλλά διεξοδική συζήτηση, αφαιρέσαμε το στολίδι. Η ισορροπία του συμβιβασμού και της στάσης σας με τις αποφάσεις σας είναι εξαιρετικά σημαντική για τη μακροπρόθεσμη υγεία του συστήματός σας.

Επιλέγοντας το σωστό πνευματικό μοντέλο

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

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

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

Προσαρμογή του συστήματός σας

Μου αρέσει να χρησιμοποιώ ένα υπάρχον διανοητικό μοντέλο ή ένα σύμβολο ονομασίας, επειδή βοηθά τους μελλοντικούς προγραμματιστές να βρουν συζητήσεις και τεκμηρίωση στην online σχεδίαση front-end community. Το ITCSS για το δικό του ήταν σχεδόν τέλειο για τις ανάγκες μου, αλλά έκανα μερικές μικρές τσιμπήματα προσαρμοσμένες στο σχέδιο μου. Εάν θέλετε μια πιο σε βάθος ματιά σε κάθε στρώμα του ITCSS, διαβάστε περισσότερα για αυτό από τον Harry Roberts εδώ.

Η τροποποιημένη δομή ITCSS που χρησιμοποίησα για τον κατάλογο των συνεργατών

Οι ορισμοί των επιπέδων για αυτήν την ελαφρώς τροποποιημένη δομή ITCSS:

  • Προμηθευτής - αρχεία για κωδικό τρίτου μέρους. Στην κορυφή είναι το πιο εύκολο να αντικατασταθεί
  • Ρυθμίσεις - προεπεξεργαστές, γραμματοσειρές, μεταβλητές (δεν δημιουργεί έξοδο στυλ)
  • Εργαλεία - mixins, λειτουργίες (δεν παράγουν έξοδο στυλ)
  • Γενικά - Επαναφορά ή εξομάλυνση αρχείων
  • Στοιχεία - γυμνά στοιχεία HTML (H1, a, p, κλπ.)
  • Συστατικά - Η πλειοψηφία του κώδικα πηγαίνει εδώ για να στυλ ειδικά στοιχεία UI
  • Βοηθητικά προγράμματα / Βοηθητικά προγράμματα - βοηθητικά προγράμματα και βοηθητικά μαθήματα που έχουν την μεγαλύτερη εξουσία (show / hide, βοηθητικά χρώματα κλπ.)

ITCSS τροποποιήσεις λεπτομερώς

  • Προσθέτοντας ένα επίπεδο προμηθευτή Ένα πρόβλημα που αντιμετώπισα με το ITCSS και όλα τα παραδείγματα έργων ήταν ότι κανένας από αυτούς δεν χρησιμοποίησε φύλλα στυλ προμηθευτή τρίτου μέρους. Θα μπορούσαμε να υποστηρίξουμε ότι βάζαμε τα εκτός αυτής της δομής αρχείων ή, ιδανικά, τα παρακάμπτουμε όλοι μαζί, αλλά χρησιμοποιήσαμε μερικά φύλλα στυλ προμηθευτών (για παράδειγμα το πλέγμα Bootstrap) και ήθελα όσους βρίσκονται κοντά. Τα φύλλα στυλ κόμματος προμηθευτή θα πρέπει να έχουν πάντα την ελάχιστη εξουσία πάνω από τον καταρράκτη. Ο προσαρμοσμένος σας κώδικας πρέπει εύκολα να αντικαταστήσει οτιδήποτε από έναν προμηθευτή χωρίς να χρειαστεί σημαντικές ετικέτες. Ως εκ τούτου, πρόσθεσα έναν κατάλογο προμηθευτών ως το ανώτερο στρώμα στο ανεστραμμένο τρίγωνό μου.
  • Προκαθορισμός των καταλόγων με αριθμούς Πρόκειται για ένα μικρό, αλλά καθιστά όλο το σύστημα πιο οπτικά εύκολο να εξηγήσει σε έναν νέο προγραμματιστή που μπαίνει στο έργο. Παίρνοντας αριθμούς καταλόγων στρώσεων, ο καταρράκτης της σημασίας γίνεται οπτικά καθαρός με την πρώτη ματιά. Θυμάστε πώς είπα ότι ο πωλητής βρισκόταν στην κορυφή του ανεστραμμένου τριγώνου; Είναι εύκολο να το δεις με έναν προκαθορισμένο αριθμό.

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

Σχόλια, σχόλια, σχόλια

Νομίζω ότι οι άνθρωποι ξεχνούν μερικές φορές τη σημασία της σχολιασμού στο CSS επειδή είναι απλό να γράφεις CSS και δύσκολο να σπάσεις. Θυμηθείτε, το CSS είναι απλό, αλλά δεν είναι εύκολο. Κάντε το σύστημά σας πιο εύκολο να το καταλάβετε στο README και στο inline σχολιασμό. Καταγράψτε τη λογική σας, αφήστε τους συνεισφέροντες να ξέρουν πώς να χρησιμοποιούν το σύστημα. Ναι, υπάρχει ένα μεταβλητό αρχείο για την τυπογραφία, αλλά δεν χρειάζεται να χρησιμοποιούν αυτές τις μεταβλητές πολύ συχνά, επειδή έχουμε ήδη δημιουργήσει βοηθούς για αυτό. Γιατί λοιπόν να μην το πείτε στο μεταβλητό αρχείο; Αυτό είναι ιδιαίτερα χρήσιμο αν χρησιμοποιείτε τον κωδικό προμηθευτή για κάτι. Χρησιμοποιώντας το Bootstrap για σημεία διακοπής; Σχόλιο όπου θα γράφετε νέα σημεία διακοπής CSS, έτσι ώστε οι προγραμματιστές να μην καταλήγουν να κάνουν μια άλλη σειρά περιττών ερωτημάτων στα μέσα μαζικής ενημέρωσης.

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

Κλείσιμο Σκέψεις για την οικοδόμηση της «Τέλεια» Δομή CSS

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

Happy cascading!