Η αρχιτεκτονική του ανεστραμμένου τριγώνου: πώς να διαχειρίζεστε μεγάλα έργα CSS

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

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

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

Παρουσιάζοντας την αρχιτεκτονική του ανεστραμμένου τριγώνου

Η αρχιτεκτονική του Inverted Triangle, επίσης γνωστή ως ITCSS, είναι μια μεθοδολογία για τη δομή του CSS σας με τον πιο αποτελεσματικό και λιγότερο σπατάλη τρόπο.

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

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

Οι αρχές

Το ITCSS λειτουργεί δομώντας ολόκληρο το έργο CSS σύμφωνα με αυτές τις 3 αρχές:

  1. Γενική έως ρητή

    Ξεκινάμε με τα πιο γενικά, χαμηλού επιπέδου, catch-all στυλ. Αυτό θα μπορούσε να είναι ρυθμίσεις γραμματοσειράς ή, για παράδειγμα, μεταβλητές χρώματος εάν χρησιμοποιείτε SCSS.

  2. Χαμηλή έως υψηλή ειδικότητα

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

  3. Μεγάλη εμβέλεια σε τοπικό

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

Τα στρώματα του τριγώνου

Η τήρηση των παραπάνω αρχών σημαίνει ότι πρέπει να χωρίσουμε το CSS σε επίπεδα. Κάθε επίπεδο πρέπει να εισαχθεί σε μια τοποθεσία που να ανταποκρίνεται σε κάθε ένα από τα κριτήρια.

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

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

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

Ο Χάρι Ρόμπερτς, ο δημιουργός του ITCSS, παρουσίασε επτά στρώματα. Τους διέταξε ως εξής:

  1. Ρυθμίσεις

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

  2. Εργαλεία

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

  3. Γενικός

    Σε αυτό το επίπεδο, στεγάζουμε όλα τα πολύ υψηλού επιπέδου, εκτεταμένα στυλ. Αυτό το επίπεδο είναι συχνά το ίδιο σε όλα τα έργα σας, καθώς περιέχει πράγματα όπως Normalize.css, CSS reset, και για παράδειγμα κανόνες μεγέθους κουτιού.

  4. Στοιχεία

    Σε αυτό το επίπεδο βάζουμε στυλ για γυμνά, μη ταξινομημένα στοιχεία HTML. Θα μπορούσατε, για παράδειγμα, να σκεφτείτε υπογραμμίσεις για αγκύρια στο hover ή μεγέθη γραμματοσειράς για τις διαφορετικές επικεφαλίδες.

  5. Αντικείμενα

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

  6. Συστατικά

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

  7. Ατού

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

Το τελικό αποτέλεσμα

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

// [email protected] "globals";@import "branding";
// [email protected] "mixins";
// [email protected] "normalize";
// [email protected] "fonts";@import "form";
// [email protected] "grid";@import "wrappers";
// [email protected] "header";@import "sidebar";@import "carousel";@import "card";
// [email protected] "overrides";

συμπέρασμα

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

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

Ψάχνετε για δουλειά στο Άμστερνταμ;

Δουλεύω για τη Sytac ως Senior front-end προγραμματιστής και ψάχνουμε για μεσαίους / ανώτερους προγραμματιστές που ειδικεύονται σε Angular, React, Java ή Scala. Η Sytac είναι μια φιλόδοξη εταιρεία συμβούλων στις Κάτω Χώρες που εργάζεται για πολλές φημισμένες εταιρείες στον τραπεζικό, τον αεροπορικό και τον κυβερνητικό τομέα.

Αν νομίζετε ότι έχετε ό, τι χρειάζεται για να δουλέψετε με τα καλύτερα, στείλτε μου ένα email στο luuk [dot] gruijs [at] sytac [dot] io και θα χαρούμε να σας πω περισσότερα.