Τα βασικά του αντικειμενοστραφούς CSS (OOCSS)
Η ανάπτυξη του Frontend κινείται γρήγορα με πολλές νέες τεχνικές που προστίθενται κάθε χρόνο. Μπορεί να είναι ένας αγώνας για τους προγραμματιστές να συμβαδίζουν με τα πάντα. Μεταξύ του Sass και του PostCSS είναι εύκολο να χαθείτε στη θάλασσα των εργαλείων ανάπτυξης.
Μία νεότερη τεχνική είναι το αντικειμενοστρεφής CSS, που ονομάζεται επίσης OOCSS για συντομία. Αυτό δεν είναι ένα εργαλείο, αλλά μια μεθοδολογία γραφής CSS που στοχεύει να κάνετε CSS αρθρωτή και βασισμένη σε αντικείμενα.
Σε αυτή τη θέση, θα ήθελα να εισαγάγει το βασικά βασικά στοιχεία του OOCSS, και πώς μπορούν αυτές οι ιδέες να εφαρμοστούν για την εργασία στο web. Αυτή η τεχνική μπορεί να μην προχωρήσει σε κάθε προγραμματιστή, αλλά αξίζει να καταλάβετε νέες ιδέες για να αποφασίσετε εάν η ροή εργασίας σας θα μπορούσε να επωφεληθεί από αυτήν.
Τι κάνει το CSS Αντικειμενοστραφή?
Ο προγραμματισμός αντικειμενοστραφής (OOP) είναι ένα παράδειγμα προγραμματισμού στο οποίο εστιάζει δημιουργώντας επαναχρησιμοποιούμενα αντικείμενα και δημιουργία σχέσεων μεταξύ αυτών, σε αντίθεση με τον διαδικαστικό προγραμματισμό που οργανώνει τον κώδικα σε διαδικασίες (ρουτίνες, υπορουτίνες ή λειτουργίες).
Το OOP έχει γίνει ευρέως διαδεδομένο και στα δύο Γλώσσες JavaScript και backend τα τελευταία χρόνια, αλλά η οργάνωση της CSS σύμφωνα με τις αρχές της εξακολουθεί να είναι μια νέα έννοια.
ο “αντικείμενο” στο OOCSS αναφέρεται σε ένα Στοιχείο HTML ή οτιδήποτε σχετίζεται με αυτήν (όπως οι κλάσεις CSS ή οι μέθοδοι JavaScript). Για παράδειγμα, μπορεί να έχετε ένα αντικείμενο widget sidebar που θα μπορούσε να αναπαραχθεί για διαφορετικούς σκοπούς (εγγραφή σε ενημερωτικά δελτία, μπλοκ διαφημίσεων, πρόσφατες αναρτήσεις κ.λπ.). CSS μπορεί στοχεύσετε αυτά τα αντικείμενα εν μαζική που κάνει την αύξουσα κλίμακα.
Συνοψίζοντας την είσοδο GitHub του OOCSS, ένα αντικείμενο CSS μπορεί να αποτελείται από τέσσερα πράγματα:
- Οι κόμβοι HTML του DOM
- Δηλώσεις CSS σχετικά με το στυλ αυτών των κόμβων
- Στοιχεία όπως εικόνες φόντου
- Συμπεριφορές JavaScript, ακροατές ή μέθοδοι που σχετίζονται με ένα αντικείμενο
Σε γενικές γραμμές, το CSS είναι αντικειμενοστρεφές όταν το θεωρεί μαθήματα που είναι επαναχρησιμοποιήσιμα και που στοχεύουν σε στοιχεία πολλαπλών σελίδων.
Πολλοί προγραμματιστές θα έλεγαν ότι το OOCSS είναι ευκολότερο να μοιραστεί με άλλους και να καταλάβει ευκολότερα μετά από μήνες (ή χρόνια) αδρανούς ανάπτυξης. Αυτό συγκρίνεται με άλλες αρθρωτές μεθόδους όπως το SMACSS που έχει αυστηρότερους κανόνες για την κατηγοριοποίηση αντικειμένων στο CSS.
Η σελίδα Συχνές ερωτήσεις OOCSS έχει πολλές πληροφορίες αν είστε περίεργοι να μάθετε περισσότερα. Και η δημιουργός Nicole Sullivan μιλάει συχνά για το OOCSS και πώς συνδέεται με τη σύγχρονη ανάπτυξη ιστοσελίδων.
Ξεχωριστή δομή από στυλ
Ένα μεγάλο μέρος του OOCSS γράφει κώδικα που χωρίζει τη δομή της σελίδας (πλάτος, ύψος, περιθώρια, παραγεμίσματα) από την εμφάνιση (γραμματοσειρές, χρώματα, κινούμενα σχέδια). Αυτό επιτρέπει προσαρμοσμένη εκδορά να εφαρμοστεί σε στοιχεία πολλών σελίδων χωρίς να επηρεάζεται η δομή.
Αυτό είναι επίσης χρήσιμο για το σχεδιασμό εξαρτημάτων που μπορεί να είναι μετακινήθηκε γύρω από τη διάταξη Με ευκολία. Για παράδειγμα, α “Πρόσφατες δημοσιεύσεις” το widget στην πλαϊνή γραμμή θα πρέπει να μετακινείται στο υποσέλιδο ή πάνω από το περιεχόμενο διατηρώντας ταυτόχρονα παρόμοια στυλ.
Ακολουθεί ένα παράδειγμα του OOCSS για ένα “Πρόσφατες δημοσιεύσεις” widget που στην περίπτωση αυτή είναι το αντικείμενο CSS:
/ * Δομή * / .side-widget πλάτος: 100%; padding: 10px 5px; / * Αποχρώσεις * / .recent-μηνύματα font-family: Helvetica, Arial, sans-serif; χρώμα: # 2b2b2b; μέγεθος γραμματοσειράς: 1.45em;
Σημειώσε ότι σχέδιο διαχειρίζεται με το .side-widget τάξη που θα μπορούσε να εφαρμοστεί και σε πολλά στοιχεία πλευρικής γραμμής, ενώ εμφάνιση διαχειρίζεται με το .Πρόσφατες δημοσιεύσεις τάξη που θα μπορούσε επίσης να χρησιμοποιηθεί για την περιποίηση άλλων widgets. Για παράδειγμα, αν το .Πρόσφατες δημοσιεύσεις widget μετακινήθηκε στο υποσέλιδο, μπορεί να μην έχει την ίδια θέση, αλλά θα μπορούσε να έχει την ίδια εμφάνιση και αίσθηση.
Επίσης, ρίξτε μια ματιά σε αυτό το παράδειγμα πλευρικής γραμμής από το CodePen. Χρησιμοποιεί ένα ξεχωριστό διαχωρισμό των κλάσεων για πλωτήρες και ευθυγράμμιση κειμένου έτσι η αναπαραγωγή δεν θα απαιτήσει επιπλέον κώδικα CSS.
Ξεχωριστό κοντέινερ από το περιεχόμενο
Διαχωρισμός περιεχομένου από το στοιχείο του δοχείου είναι μια άλλη σημαντική αρχή του OOCSS.
Με απλούστερους όρους, αυτό σημαίνει μόνο ότι πρέπει να αποφεύγετε να χρησιμοποιείτε επιλογείς παιδιών όποτε αυτό είναι δυνατό. Κατά την προσαρμογή οποιωνδήποτε μοναδικών στοιχείων σελίδας όπως συνδέσεις αγκυροβόλησης, κεφαλίδες, blockquotes ή μη ταξινομημένες λίστες, θα πρέπει να τους δώσετε μοναδικά μαθήματα και όχι επιλογείς απογόνων.
Ακολουθεί ένα απλό παράδειγμα:
/ * OOCSS * /. Sidebar / * περιεχόμενα πλευρικής γραμμής * / h2.sidebar-title / * ειδικές μορφές στοιχείου h2 * / / * h2 / * προσθέτει μεγαλύτερη εξειδίκευση από ότι απαιτείται * /
Παρόλο που δεν είναι τρομερό να χρησιμοποιήσετε τη δεύτερη μορφή κώδικα, συνιστάται ιδιαίτερα να ακολουθήσετε την πρώτη μορφή αν θέλετε να γράψετε καθαρά OOCSS.
Κατευθυντήριες γραμμές ανάπτυξης
Είναι δύσκολο να καρφώσουμε τις ακριβείς προδιαγραφές, επειδή οι προγραμματιστές συζητούν συνεχώς το σκοπό του OOCSS. Αλλά εδώ είναι μερικές προτάσεις που μπορούν να σας βοηθήσουν να γράψετε καθαρότερο κώδικα OOCSS:
- Δουλεύω με τάξεις αντί των αναγνωριστικών για στυλ.
- Προσπάθησε να να απέχουν από την πολυεπίπεδη τάξη εξειδίκευση εκτός αν χρειαστεί.
- Καθορίζω μοναδικά στυλ με επαναλαμβανόμενες κατηγορίες (π.χ. επιπλέει, clearfix, μοναδικά στοίβα γραμματοσειρών).
- Επέκταση στοιχείων με στοχευμένες τάξεις παρά τις γονικές τάξεις.
- Οργανώστε το φύλλο στυλ σας σε τμήματα, σκεφτείτε να προσθέσετε έναν πίνακα περιεχομένων.
Λάβετε υπόψη ότι οι προγραμματιστές θα πρέπει να εξακολουθούν να χρησιμοποιούν αναγνωριστικά για τη στόχευση JavaScript, αλλά δεν απαιτούνται για το CSS, επειδή είναι πολύ συγκεκριμένες. Εάν ένα αντικείμενο χρησιμοποιεί αναγνωριστικό για στυλ CSS, δεν μπορεί ποτέ να αναπαραχθεί επειδή τα αναγνωριστικά είναι μοναδικά αναγνωριστικά. Εάν χρησιμοποιείτε μόνο τάξεις για στυλ, τότε Η κληρονομιά γίνεται πολύ πιο εύκολη στην πρόβλεψη.
Επιπλέον, οι κλάσεις μπορούν να συνδεθούν μαζί για επιπλέον χαρακτηριστικά. Ένα μόνο στοιχείο θα μπορούσε να έχει 10+ τάξεις που συνδέονται με αυτό. Ενώ 10+ τάξεις σε ένα στοιχείο δεν είναι κάτι που θα πρότεινα προσωπικά, επιτρέπει στους προγραμματιστές να συγκεντρώσουν μια βιβλιοθήκη επαναχρησιμοποιούμενων στυλ για απεριόριστα στοιχεία σελίδας.
Τα ονόματα τάξεων στο πλαίσιο του OOCSS είναι κάπως αμφιλεγόμενα και δεν τίθενται σε πέτρα. Πολλοί προγραμματιστές προτιμούν να κρατούν τα μαθήματα σύντομα και μέχρι το σημείο.
Η θήκη Camel είναι επίσης δημοφιλής, για παράδειγμα .errorBox αντί .σφάλμα-πλαίσιο. Αν κοιτάξετε την ονομασία κλάσης στην τεκμηρίωση του OOCSS, θα παρατηρήσετε ότι η περίπτωση καμήλας είναι η περίπτωση “επίσημος” σύσταση. Δεν υπάρχει τίποτα κακό με τις παύλες, αλλά κατά κανόνα είναι καλύτερο να ακολουθείτε τις οδηγίες του OOCSS.
OOCSS + Sass
Οι περισσότεροι προγραμματιστές Ιστού ήδη αγαπούν το Sass και έχουν ξεπεράσει γρήγορα την κοινότητα των frontend. Εάν δεν έχετε δοκιμάσει ήδη Sass, αξίζει να το κάνετε. Σας επιτρέπει να γράφετε κώδικα με μεταβλητές, λειτουργίες, φωλιές και μεθόδους σύνταξης όπως οι μαθηματικές λειτουργίες.
Σε ικανά χέρια, το Sass και το OOCSS θα μπορούσαν να είναι ένας αγώνας που έγινε στον ουρανό. Θα βρείτε ένα εξαιρετικό γράψιμο για αυτό στο blog The Sass Way.
Για παράδειγμα, χρησιμοποιώντας το Sass @επεκτείνω μπορείτε να εφαρμόσετε τις ιδιότητες μιας τάξης σε μια άλλη τάξη. Οι ιδιότητες δεν είναι διπλές, αλλά οι δύο κλάσεις συνδυάζονται με έναν επιλογέα κόμμεων. Με αυτόν τον τρόπο μπορείτε να ενημερώσετε τις ιδιότητες CSS σε μία τοποθεσία.
Αν γράφετε συνεχώς τα φύλλα στυλ, αυτό θα εξοικονομούσε ώρες πληκτρολόγησης και βοήθεια αυτοματοποιήσει τη διαδικασία OOCSS.
Θυμηθείτε επίσης αυτό η συντήρηση κώδικα είναι ένα μεγάλο μέρος του OOCSS. Χρησιμοποιώντας το Sass, η εργασία σας γίνεται ευκολότερη με μεταβλητές, mixins και προηγμένα εργαλεία χαλάρωσης συνδεδεμένα στη ροή εργασίας.
Ένα βασικό χαρακτηριστικό του μεγάλου κώδικα OOCSS είναι το δυνατότητα να το μοιραστείτε με οποιονδήποτε, ακόμα και εσείς σε μεταγενέστερη ημερομηνία, και να είστε σε θέση να το παραλάβετε με ευκολία.
Επιδόσεις απόδοσης
Το OOCSS προορίζεται να λειτουργεί ομαλά και χωρίς μεγάλη σύγχυση. Οι προγραμματιστές δοκιμάζουν το καλύτερο δεν να επαναληφθούν σε κάθε στροφή, στην πραγματικότητα αυτό είναι το σκεπτικό πίσω από την ανάπτυξη DRY. Με την πάροδο του χρόνου, η τεχνική OOCSS μπορεί να οδηγήσει σε εκατοντάδες τάξεις CSS με μεμονωμένες ιδιότητες που εφαρμόζονται δεκάδες φορές σε ένα συγκεκριμένο έγγραφο.
Δεδομένου ότι το OOCSS εξακολουθεί να είναι ένα νέο θέμα, είναι δύσκολο να υποστηρίξουμε το θέμα του bloat. Πολλά αρχεία CSS καταλήγουν να φουσκώνονται με μικρή δομή, ενώ το OOCSS παρέχει άκαμπτη δομή και (ιδανικά) λιγότερη καταπόνηση. Η μεγαλύτερη ανησυχία σχετικά με την απόδοση θα ήταν στο HTML, όπου ορισμένα στοιχεία μπορούν να συσσωρεύουν μια χούφτα διαφορετικών κλάσεων για τη δομή και το σχεδιασμό.
Θα βρείτε ενδιαφέρουσες συζητήσεις σχετικά με αυτό το θέμα σε ιστότοπους όπως το Stack Overflow και το CSS-Tricks.
Η σύστασή μου είναι να προσπαθήσω να φτιάξω ένα δείγμα έργου και να δούμε πώς πηγαίνει. Εάν ερωτευτείτε με το OOCSS, μπορεί να αλλάξει ριζικά πώς κωδικοποιείτε τους ιστότοπους. Εναλλακτικά, αν το μισείτε, μαθαίνετε ακόμα μια νέα τεχνική και σκέπτεστε κριτικά για το πώς λειτουργεί. Είναι win-win, δεν έχει σημασία τι.
Πάρτε Busy Writing OOCSS
Ο καλύτερος τρόπος για να μάθετε τίποτα στην ανάπτυξη ιστού είναι να εξασκηθείτε. Αν καταλαβαίνετε ήδη τα βασικά του CSS τότε είστε σε καλό δρόμο!
Εφόσον το OOCSS δεν απαιτεί προεπεξεργασία, θα μπορούσατε να το δοκιμάσετε με ένα online IDE, όπως το CodePen. Απλά έργα είναι τα καλύτερα για να ξεκινήσετε και να βελτιώσετε τις γνώσεις σας από εκεί.
Ρίξτε μια ματιά σε αυτούς τους πόρους για να προωθήσετε την έρευνά σας στον εξελισσόμενο τομέα του OOCSS.
- Επίσημη Ιστοσελίδα OOCSS
- Αντικειμενοστρεφής CSS: Τι, πώς και γιατί
- OOCSS + Sass = Ο καλύτερος τρόπος να CSS
- Εισαγωγή στο αντικειμενοστρεφές CSS
