Πώς να οργανώσετε καλύτερα την αρχιτεκτονική CSS με OOCSS, BEM, & SMACSS

Μου άρεσε τα μπλοκ του Lego.

Ήταν μακράν τα αγαπημένα μου παιχνίδια - έκαναν πολλά φορτία!

Βλέπετε, είμαι σχεδιαστής, γιος σχεδιαστή. Τα μπλοκ Lego ήταν το πρώτο μας sandbox δημιουργικότητας: μας επέτρεψαν να συγκεντρώσουμε όλα τα τρελά πράγματα.

Δεν ήξερα γιατί τους άρεσε τόσο πολύ τότε. Αλλά τώρα το κάνω.

Δεν ήταν τα χρώματα τους ή τα τεμάχια 7K Millennium Falcon. Οχι.

Ήταν το τέλειο κομμάτι κάθε κομμάτι να ταιριάζει μαζί, με κάθε δυνατό τρόπο.

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

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

Για να το πράξω, θα παρουσιάσω τρεις σημαντικές μεθοδολογίες CSS.

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

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

Γνωρίστε τα ακρωνύμια σας (OOCSS, BEM, SMACSS)

Αρχαίο αστείο CSS - Δύο κανόνες CSS μπαίνουν σε ένα μπαρ. Ένα μπουκάλι πέφτει σε μια εντελώς διαφορετική μπάρα.

Τι είναι το OOCSS;

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

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

Ελέγχει επίσης ένα βασικό πλαίσιο UX και Γραφικού Σχεδιασμού: Συνέπεια. Επαναχρησιμοποιώντας ένα παρόμοιο σχεδιασμό κουμπιών σε όλη τη διεπαφή, οι χρήστες εξοικειώνονται με αυτό και η εφαρμογή αισθάνεται πιο έξυπνη σε κάθε νέα συνεδρία. Με το OOCSS, απλώς επαναχρησιμοποιούμε τον κώδικα, καθιστώντας τον ταχύτερο και ευκολότερο να δημιουργήσετε περισσότερα πράγματα, χωρίς να προσθέσετε σημαντικά έξοδα στο βασικό κώδικα. DRY CSS, άνθρωποι!

Η Nicole Sullivan έγραψε αυτή την ανάρτηση το 2010 (ποτέ αργά για να προλάβει το ), εξηγώντας τη δύναμη του OOCSS στο αντικείμενο των μέσων ενημέρωσης. Η κύρια λήψη από αυτό το άρθρο είναι η δυνατότητα απομόνωσης και αφαίρεσης των μοτίβων διεπαφής σε αυτοτελείς μπλοκ κώδικα τόσο για HTML όσο και για CSS. Ακολουθεί ένα παράδειγμα του Αντικειμένου Media της Nicole:

             
.μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ {...}
.media .img {...}
.media .img img {...}
.media .imgExt {...}
.bd {...}

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

Τι είναι το BEM;

Το BEM είναι μια συγκεκριμένη εφαρμογή των αρχών OOCSS, που δημιουργήθηκε από την Yandex.

Πρόκειται για Block, Element και Modifier, και είναι ένα τρελό πολύπλοκο πλαίσιο. Ο Nicolas Gallagher απλοποίησε τη σύμβαση ονοματοδοσίας της BEM, η οποία στη συνέχεια έγινε διάσημη από τον Harry Roberts. IMO, η απλοποιημένη έκδοση είναι ήδη αρκετά ισχυρή για τις περισσότερες ανάγκες. Ποτέ δεν χρησιμοποίησα ποτέ την αρχική.

Εδώ είναι το προηγούμενο παράδειγμα κώδικα, χρησιμοποιώντας χώρους ονομάτων BEM.

             
.μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ {...}
.media - inverter {...}
.media__image-wrapper {...}
.media__image {...}
.media__content {...}
// Με το SASS - το οποίο θα εξάγει τον παραπάνω κώδικα
.μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ { ...
  & - μετατροπέας {...}
  & __εμφάνιση εικόνας {...}
  &__εικόνα {...}
  & __ περιεχόμενο {...}
}}

Ένα μεγάλο πράγμα για το BEM είναι ο έλεγχος της ειδικότητας. Χρησιμοποιώντας τη σύμβαση ονοματολογίας που αναφέρεται παραπάνω, περιορίζουμε αυτόματα την ιδιαιτερότητά μας σε μονής επιλογής .class ή [0 0 1 0]. Αν διαπιστώσετε ότι η ιδιαιτερότητα του καταρράκτη είναι πολύ περίπλοκη - δεν είστε μόνος - λάβετε υπόψη αυτό το θέμα:

ΠΑΝΤΑ ΧΡΗΣΙΜΟΠΟΙΕΙΤΕ.

Για τις επόμενες παραγράφους, υποθέτω ότι καταλαβαίνετε τι σημαίνει [0 0 1 0]. Εάν δεν το κάνετε, διαβάστε πρώτα αυτό.

Η ιδιαιτερότητα είναι δύσκολη, αλλά μόλις την καταλάβετε, μπορείτε να την αξιοποιήσετε αρκετά γρήγορα. Ακολουθώντας τη σύμβαση ονοματοδοσίας BEM, θα έχουμε ήδη το 90% των στυλ μας στο [0 0 1 0]. Αυτό μόνο θα κάνει τη ζωή μας πιο εύκολη. Αν τηρήσετε αυτό, η σειρά των @imports θα σας πειράξει πολύ, γι 'αυτό προσέξτε.

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

Υποθέτοντας ότι έχετε τα στοιχεία σας στο [0 0 1 0], θα μπορούσατε να προσθέσετε ένα αναγνωριστικό στο σώμα κάθε σελίδας και πεδίο εφαρμογής μερικές παρακάμψεις για αυτήν τη σελίδα. Η επισήμανση των αντικαταστάσεων σας με αυτό το αναγνωριστικό θα εξασφαλίσει ότι όλοι λειτουργούν ανεξάρτητα από τη σειρά των μορφών του κώδικα σας, αφού έχουν πολύ μεγαλύτερη ειδικότητα [0 1 1 0].

Γρήγορη σημείωση: Εάν χρησιμοποιείτε την ίδια παράκαμψη σε δύο διαφορετικές σελίδες, ίσως έχει νόημα να την περιγράψετε σε έναν & - τροποποιητή.

Και πάλι, αυτές οι παρακάμψεις πρέπει να είναι αρκετά ελάχιστες. Αυτή η τεχνική που χρησιμοποιώ βασίζεται σε έννοιες που έλαβα από το SMACSS και το Atomic Design από τον Brad Frost.

Τι είναι το SMACSS;

Το SMACSS είναι το αρκτικόλεξο για την κλιμακωτή και αρθρωτή αρχιτεκτονική για το CSS, που δημιουργήθηκε από τον Jonathan Snook με μεγάλα έργα CSS codebases και ομάδες στο μυαλό - εργάστηκε στο Yahoo και στο Shopify. Ο Jonathan παρουσίασε μερικές σκέτες ιδέες και βέλτιστες πρακτικές για τη δομή αρχείων CSS, τις οποίες συνέταξε στο βιβλίο SMACSS.

Η SMACSS 2η έκδοση είναι από το 2012, πολύ πριν από τα στοιχεία & React τρέλα. Για μένα, το πιο συναρπαστικό μέρος στο SMACSS είναι η έξυπνη χρήση των περιτυλιγμάτων και των δοχείων, ώστε τα εξαρτήματα να ταιριάζουν απόλυτα παντού.

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

Θεωρία αδυναμιών συνιστωσών CSS

.ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ
  .block__element
  .block__slot

.block δεν θα είχε ποτέ ιδιότητες CSS όπως float: αριστερά ή περιθώριο: 20px. Αυτά θα παρεμβαίνουν στα εξωτερικά εξαρτήματα, καθιστώντάς τα να συμπεριφέρονται ασυνεπώς σε περισσότερες από μία περιπτώσεις.

Μια άλλη καλύτερη πρακτική SMACSS θεωρώ χρήσιμη είναι η έννοια του δοχείου ή υποδοχής. Αυτό λειτουργεί σαν το στοιχείο στο Vue.js, από όπου έβαλα το όνομα. Δημιουργείτε έναν "ασφαλή χώρο" στον οποίο μπορείτε να εγκαταλείψετε τα στοιχεία. Θα ακολουθήσει την ίδια ιδέα από το προηγούμενο παράδειγμα, όπου δεν θα προσθέσαμε ιδιότητες όπως padding στο .block__container. Η προσθήκη ενός παρενθέματος θα παρεμβαίνει στα συστατικά μέσα. Δεν το θέλουμε.

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

Έτσι, το SMACSS είναι κάτι περισσότερο από τον τρόπο οργάνωσης των ιδιοτήτων CSS: το κύριο πλεονέκτημα του είναι η modularity.

Αν ακολουθήσετε αυτές τις οδηγίες, το HTML / CSS μπορεί εύκολα να εφαρμοστεί σε οποιοδήποτε από τα σημαντικότερα πλαίσια του JS, αφού ακολουθεί ήδη την εννοιολογική δομή.

Πλαίσιο-agnostic, modular CSS για τη νίκη

Ο στόχος μου είναι απλός: οργανωμένος, διατηρήσιμος CSS.

Μελετώ αυτές τις μεθοδολογίες για να γίνω καλύτερος σχεδιαστής και προγραμματιστής διεπαφών. Η ικανότητά σας να δημιουργείτε αποτελεσματικά απομονωμένα εξαρτήματα είναι απολύτως απαραίτητη για σύγχρονες διεπαφές. Λόγω της πληθώρας των πλαισίων, προσπάθησα να πάω πίσω και να δω τι ελάχιστες απαιτήσεις για την ανάπτυξη "πλαισίων agnostic" στοιχεία διεπαφής ήταν. Επί του παρόντος, χρησιμοποιώ ένα boilerplate Jekyll: μου παρέχει τα εργαλεία που χρειάζομαι για να δημιουργήσω διεπαφές και οδηγούς στυλ και δεν είναι κλειδωμένο σε κάποιο συγκεκριμένο πλαίσιο.

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

Το BEM είναι ιδιαίτερα χρήσιμο όταν εργάζεστε σε μια πιο παραδοσιακή εγκατάσταση, όπου εξυπηρετεί το διπλό σκοπό του πεδίου εφαρμογής των στυλ για αυτό το στοιχείο και την προσθήκη των πληροφοριών πλαισίου στα στοιχεία. Αλλά τώρα που συνηθίσαμε, καταλήγω με τα κλασσικά ονόματα BEM ακόμα και στο React ή στο Vue.

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

Το OOCSS μαζί με το BEM & SMACSS θα σας βοηθήσουν να φιλήσετε τα μακαρόνια, ανεξάρτητα από τη στοίβα ή το πλαίσιο σας!

(Μην) Ακολουθήστε το λευκό κουνέλι

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

Τι έχει να κάνει αυτό με το CSS;

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

Αυτό, κατά τη γνώμη μου, είναι όπου τα πράγματα γίνονται περιττό περίπλοκα για τους υπόλοιπους μας. Δεδομένου ότι οι περισσότεροι από εμάς δεν ασχολούνται με αυτό το επίπεδο πολυπλοκότητας, θα μπορούσε κανείς να ισχυριστεί ότι το OOCSS δεν είναι απαραίτητο. Μπορεί. Αλλά βοηθά, πολλά.

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

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

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

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

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

Πόροι για να οργανώσετε την αρχιτεκτονική CSS

  • Επίσημη Μεθοδολογία _BEM Γρήγορη εκκίνηση
  • Nicolas Gallagher προσαρμογή του _BEM

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

Αυτή είναι η επίσημη τεκμηρίωση αυτής της μεθοδολογίας. Προτείνω επίσης αυτό το μάθημα αρχιτεκτονικής CSS στο Frontend Masters.

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

Κλείνοντας τις σκέψεις

Μπήκα στο SMACSS και το BEM πριν από λίγα χρόνια, αναζητώντας καλύτερους τρόπους για να γράψω το CSS. Αρχικά, απέρριψα την BEM, θεωρώντας ότι ήταν υπερβολική και ότι τα κλασσικά ονόματα ήταν πολύ περίεργα.

Λίγους μήνες αργότερα δούλευα σε ένα πρόγραμμα Styleguide, στο οποίο χρησιμοποίησα τη σύμβαση ονομασίας από το SMACSS. Αυτό λειτούργησε αρκετά καλά, αλλά από τη στιγμή που άλλοι προγραμματιστές άρχισαν να το χρησιμοποιούν, κάποια θέματα άρχισαν να σκάσουν. Συγκεκριμένα, θέματα με εμφάνιση και αντιφατικά στυλ. Αυτά ήταν τα λόγια μου για να μεταβείτε σε κλασσικά ονόματα BEM. Δεν χρειάζεται να αναφέρουμε τον πόνο να ξαναγράψουμε ολόκληρο το styleguide σε ένα διαφορετικό σύστημα ονομασίας. Τώρα, αυτός ο οδηγός στυλ χρησιμοποιείται από προγραμματιστές σε όλο τον κόσμο και μου φαίνεται ότι τίποτα δεν σπάζει. (Λυπούμαστε που δεν μοιράζεστε τον σύνδεσμο styleguide, είναι ιδιωτικός.)

Σήμερα, τρέχω ταυτόχρονα περίπου 10 έργα και ένα αρχείο περίπου 30 έργων που σχεδιάστηκαν και αναπτύχθηκαν με τη χρήση της συνιστώσας νοοτροπίας. Δεν μπορώ να πω πόσο πολλές φορές άνοιξα ένα φάκελο από το 2016 με ένα κομψό στοιχείο, όπως ένα τραπέζι ή μια κάρτα, και εισήγαγα μόνο το SASS μερικό στο νέο μου έργο. Μόλις χρησιμοποιήσετε τη δομοστοιχειωτή CSS, γίνεται ένα μη-brainer για να χρησιμοποιήσετε τα προηγούμενα έργα σας ως ένα αξιοπρεπώς οργανωμένο αρχείο των στοιχείων διεπαφής.

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

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

Σας καλώ λοιπόν να πειραματιστείτε με τις μεθοδολογίες που συζητήσαμε.

Ποιος ξέρει, ίσως απλώς να αποδείξει την CSS αρχιτεκτονική σας για το 2018 και πέρα!

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

Αυτό ήταν μια φιλοξενούμενη θέση στο blog μας από τον Claudio Mendonca, σχεδιαστή frontend που εδρεύει στο Μόντρεαλ.