Εισαγωγή στο ITCSS για προγραμματιστές Ιστού

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

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

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

Τι είναι το ITCSS?

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

Η νέα ιδέα του Inverted Triangle CSS είναι α στρώσιμο τρόπο διαχωρισμού των ιδιοτήτων CSS με βάση το επίπεδο εξειδίκευσης και σπουδαιότητάς τους. Είναι μια λιγότερο γνωστή μέθοδος σε σύγκριση με τα SMACSS και OOCSS - αν και τα δύο μπορούν να συνδυαστούν με το ITCSS.

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

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

Εδώ είναι μερικά από τα μεγαλύτερα οφέλη από τη χρήση του ITCSS:

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

Το σύστημα ITCSS

Ας ρίξουμε μια ματιά στο πώς λειτουργεί το Μοντέλο Αντιστρεπτέων Τριγώνων χρησιμοποιώντας την ακόλουθη εικόνα από τη θέση του Lubos Kmetko.

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

Κάθε υποενότητα του τριγώνου μπορεί να θεωρηθεί ξεχωριστό αρχείο ή ομάδα αρχείων, αν και δεν χρειάζεται να γράφετε κώδικα με αυτόν τον τρόπο. Είναι πιο λογικό για τους χρήστες Sass / Λιγότερο λόγω της δυνατότητας εισαγωγής. Απλά σκεφτείτε κάθε υποτμήμα ως μεθοδολογία διαχωρισμός και οργάνωση του επαναχρησιμοποιούμενου κώδικα CSS.

Ας ρίξουμε μια γρήγορη ματιά στο κάθε τμήμα του ανεστραμμένου τριγώνου μετακινώντας από την κορυφή προς τα κάτω στην άκρη.

• Ρυθμίσεις - Μεταβλητές και μέθοδοι προ-επεξεργαστή (χωρίς πραγματική έξοδο CSS)
• Εργαλεία - Mixins και λειτουργίες (χωρίς πραγματική έξοδο CSS)
• Γενικός - Οι επαναλήψεις CSS που μπορεί να περιλαμβάνουν την επαναφορά του Eric Meyer, το Normalize.css ή τη δική σας παρτίδα κώδικα
• Στοιχεία - Ενιαίοι επιλογείς στοιχείων HTML χωρίς τάξεις
• Αντικείμενα - Τάξεις για τη δομή της σελίδας που συνήθως ακολουθούν τη μεθοδολογία OOCSS
• Συστατικά - Αισθητικές κλάσεις για το styling οποιουδήποτε & όλων των στοιχείων της σελίδας (συχνά σε συνδυασμό με τη δομή των τάξεων αντικειμένων)
• Ατού - Τα πιο συγκεκριμένα στυλ για να παρακάμψετε οτιδήποτε άλλο στο τρίγωνο

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

Θα πρέπει να αισθάνεστε ελεύθεροι να ερμηνεύετε κάθε υποτμήμα όπως κρίνετε κατάλληλο. Για παράδειγμα, η Ιορδανία Κοσέι εξηγεί πώς συνδυάζει τη δομή και την αισθητική μαζί σε τάξεις αντικειμένων, αφήνοντας πολύ λίγα στην ενότητα Components.

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

Αν και ο δημιουργός του ITCSS Harry Roberts ήταν διατεθειμένος να κρατήσει τις μεθόδους του ιδιόκτητο για εσωτερική χρήση, μπορείτε να βρείτε ένα παράδειγμα ανοιχτού κώδικα του ITCSS σε αυτό το repo GitHub. Είναι φιλοξενούνται από το λογαριασμό CSS Wizardry που είναι η προσωπική ιστοσελίδα του Harry Roberts.

BEM + IT = BEMIT Ονομασία

Ένα από τα πιο δημοφιλή συστήματα ονομασίας CSS είναι το BEM. Αυτό σημαίνει "μπλοκ-στοιχείου-τροποποιητής" και ακολουθεί μια πολύ συγκεκριμένη σύνταξη.

Κάθε στοιχείο στο BEM περιγράφει μια σύμβαση ονομασίας για τις κλάσεις CSS:

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

BEMIT είναι η σύμβαση ονομασίας που υιοθετήθηκε από το ITCSS, η οποία δανείζεται ιδέες από τη BEM ενώ εφαρμόζει νέες ιδέες με το ITCSS.

Η σύνταξη BEM υπαγορεύει πολύ συγκεκριμένους κανόνες. Ακολουθεί ένα δείγμα από τον ιστότοπο BEM:

.μορφή  .form - θέμα-xmas  .form - απλό  .form__input  .form__submit  .form__submit - απενεργοποιημένο  

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

Ο Χάρι βυθίζεται βαθύτερα στο BEMIT σε αυτή τη θέση στο blog. Η περιγραφή του είναι πολύ σύντομη και δείχνει ότι είναι η πραγματική φύση του ITCSS Παίξτε φιλικά με άλλες μεθοδολογίες CSS.

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

Ακολουθεί κάποιο παράδειγμα κώδικα που αντιπροσωπεύει τυπικές συμβάσεις ονομασίας BEMIT.

  
... 
 
 

Συνιστά επίσης τη χρήση του @ επίθημα για τάξεις που βασίζονται σε μορφές πολυμέσων. Ετσι το .o-media μπορεί να αλλάξει .o-media @ lg για μεγάλες οθόνες και .o-media @ md για οθόνες μεσαίου μεγέθους.

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

Συνιστώ ανεπιφύλακτα να διαβάσετε αυτό το εισαγωγικό άρθρο BEMIT για να μάθετε περισσότερα για το γιατί το ITCSS επέκτεινε το BEM και πώς μπορεί να θέλετε να ονομάσετε τις τάξεις CSS.

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

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

Τυλίγοντας

Οι προγραμματιστές του Front-End προσπαθούν πάντα να βελτιστοποιήσουν τη ροή εργασίας τους. Το ITCSS είναι μια άλλη μέθοδος που μπορεί να συμβάλει σε μια βελτιωμένη μέθοδο δομής σύνθετων ιστοσελίδων.

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

• Διαχείριση μεγάλων έργων web με νέα CSS αρχιτεκτονική ITCSS (creativebloq.com)
• Διαχείριση έργων CSS με ITCSS - Διαφάνειες παρουσίασης (speakerdeck.com)
• Έργα CSS με ITCSS (παρουσίαση βίντεο 1 ώρας)
• ITCSS - Ένας ενδιαφέρον τρόπος για την οργάνωση έργων μεγάλης κλίμακας (css-tricks.com)

(Φωτογραφία εξώφυλλου μέσω speakerdeck.com)