Κατανόηση των μεθοδολογιών γραφής CSS

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

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

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

Μεθοδολογία CSS

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

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

Θα εξετάσουμε αυτές τις μεθοδολογίες, οι οποίες θα περιλαμβάνουν:

1. OOCSS (αντικειμενοστραφής CSS)
2. BEM (Block, Element, Modifier)
3. ACSS (Atomic CSS)
4. SMACSS (κλιμακωτή και αρθρωτή αρχιτεκτονική για CSS)

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

1. OOCSS

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

Στο OOCSS, το πρώτο βήμα που προτείνει η Nicole είναι να κάνουμε εντοπίστε αντικείμενα στο CSS.

“Βασικά, ένα αντικείμενο "CSS" είναι ένα επαναλαμβανόμενο οπτικό μοτίβο, το οποίο μπορεί να αντληθεί σε ένα ανεξάρτητο απόσπασμα HTML, CSS και ενδεχομένως JavaScript. Αυτό το αντικείμενο μπορεί στη συνέχεια να επαναχρησιμοποιηθεί σε ολόκληρο τον ιστότοπο. - Nicole Sullivan, Github (OOCSS)“

Πάρτε για παράδειγμα αυτή τη δομή από αυτό το site. Εδώ είναι κάτι που είναι ένα επαναλαμβανόμενο οπτικό μοτίβο και έχει το δικό του ανεξάρτητο HTML και / ή CSS:

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

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

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

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

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

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

Μειονεκτήματα του OOCSS: Χωρίς μια δίκαιη ποσότητα επαναλαμβανόμενων οπτικών μοτίβων, η διαχωρισμός της δομής και των κωδικών οπτικού στυλ φαίνεται περιττή.

2. BEM

Αναπτύχθηκε από τους προγραμματιστές στο Yandex το 2009, οι βασικές έννοιες για το BEM (Block, Element, Modifier) ​​περιλαμβάνουν τον προσδιορισμό ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ, στοιχείο & & τροποποιητής και ονομάζοντάς τους ανάλογα.

ΕΝΑ “ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ” είναι ουσιαστικά το ίδιο με ένα “αντικείμενο”(από το προηγούμενο παράδειγμα), ένα “στοιχείο” αναφέρεται στα στοιχεία του μπλοκ (εικόνα, τίτλος, προεπισκόπηση κειμένου στην παραπάνω Επισκόπηση τοποθέτησης- αντικείμενα). ΕΝΑ “τροποποιητής” μπορεί να χρησιμοποιηθεί όταν αλλάζει η κατάσταση ενός μπλοκ ή ενός στοιχείου, για παράδειγμα όταν προσθέτετε μια ενεργή κλάση σε ένα στοιχείο μενού για να το επισημάνετε, η ενεργή κλάση ενεργεί ως ο τροποποιητής σας.

Μόλις προσδιορίσετε τα στοιχεία, ονομάστε τα ανάλογα. Για παράδειγμα:

• ένα μπλοκ μενού θα έχει την κλάση μενού
• τα στοιχεία του θα έχουν την τάξη menu__item (το μπλοκ και το στοιχείο διαχωρίζονται με διπλή υπογράμμιση)
• ο τροποποιητής για την κατάσταση απενεργοποίησης του μενού μπορεί να έχει την κλάση menu_disabled (τροποποιητής οριοθετημένος από μία μόνο υπογράμμιση)
• τροποποιητής για την κατάσταση απενεργοποίησης ενός στοιχείου μενού μπορεί να είναι menu__item_disabled.

Για τροποποιητές, μπορούμε επίσης να χρησιμοποιήσουμε key_value μορφή για την ονομασία. Για παράδειγμα, για να διακρίνουμε όλα τα στοιχεία μενού που συνδέονται με ξεπερασμένα άρθρα, μπορούμε να τους δώσουμε την τάξη menu__item_status_obsolete, και για το σχεδιασμό οποιωνδήποτε στοιχείων μενού που δείχνουν σε εκκρεμή έγγραφα, το όνομα της κλάσης μπορεί να είναι menu__item_status_pending.

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

Ο ιστότοπος της BEM αναφέρεται επίσης πώς ο διαχωρισμός μπλοκ, στοιχείου και τροποποιητή μπορεί επίσης να εισαχθεί στο σύστημα αρχείων CSS. Τα μπλοκ σαν “κουμπιά” και “εισροές” μπορούν να έχουν τους δικούς τους φακέλους που αποτελούνται από τα αρχεία (.css, .js) που σχετίζονται με αυτά τα μπλοκ, πράγμα που κάνει τα πράγματα ευκολότερα όταν θέλουμε να εισαγάγουμε αυτά τα μπλοκ σε άλλα έργα.

Πλεονεκτήματα της BEM:Εύκολη χρήση ονομάτων τάξεων και μείωση σε βαθιούς επιλογείς CSS.

Μειονεκτήματα της BEM:Για να διατηρήσετε τα ονόματα υγιή, το BEM σας συμβουλεύει να διατηρήσουμε το μπλοκάρισμα στο στοιχείο που είναι φωλιζόμενο.

3. ACSS

Δημοσιεύθηκε από το Yahoo, κάπου κοντά στο τέλος του πρώτου δεκαετία του 21ου αιώνα^st αιώνα, οι βασικές έννοιες του ACSS συνίστανται στη δημιουργία τάξεων για το πιο ατομικό επίπεδο στυλ, δηλ. ένα ζεύγος ιδιότητας-τιμής, στη συνέχεια, χρήση τους σε HTML, όπως απαιτείται.

Είναι δύσκολο να προσδιοριστεί πότε αναπτύχθηκε για πρώτη φορά το ACSS (Atomic CSS) από τότε που η έννοια χρησιμοποιήθηκε για λίγο. Οι προγραμματιστές χρησιμοποιούν κατηγορίες όπως .clearfix υπερχείλιση: κρυφό για πολύ καιρό. Η ιδέα στο ACSS είναι να έχουν μια τάξη για σχεδόν κάθε επαναχρησιμοποιήσιμο ζευγάρι που δεν σχετίζεται με το περιεχόμενο θα χρειαστεί στον ιστότοπό μας και να προσθέσουμε αυτές τις κλάσεις όταν χρειαστεί στα στοιχεία HTML.

Παρακάτω είναι ένα παράδειγμα κατηγοριών που βασίζονται στο ACSS και πώς χρησιμοποιούνται σε HTML.

 .mr-8 margin-right: 8px; .fl-r float: right 
 

Όπως μπορείτε να δείτε, ο αριθμός των τάξεων θα πάρει υψηλή με αυτή τη μέθοδο και το HTML θα είναι γεμάτο από όλες αυτές τις κατηγορίες. Αυτή η μέθοδος δεν είναι 100% αποτελεσματική αλλά μπορεί να γίνει χρήσιμη αν θέλετε. Το Yahoo το χρησιμοποιεί τελικά.

Πλεονεκτήματα του ACSS:Στυλ HTML χωρίς να αφήνει HTML.

Μειονεκτήματα της ACSS:Πάρα πολλές τάξεις, όχι πολύ τακτοποιημένες και ίσως το μισείτε.

4. SMACSS

Αναπτύχθηκε το 2011 από τον Jonathan Snook Το SMACSS (Scalable and Modular Architecture for CSS) λειτουργεί προσδιορίζοντας τους 5 διαφορετικούς τύπους κανόνων στυλ. Τα ονόματα κλάσεων και το σύστημα αρχειοθέτησης δημιουργούνται βάσει αυτών.

“Το SMACSS είναι ένας τρόπος να εξετάσετε τη διαδικασία σχεδιασμού σας και ως έναν τρόπο να προσαρμόσετε αυτά τα άκαμπτα πλαίσια σε μια ευέλικτη διαδικασία σκέψης. - Ο Jonathan Snook”

Το SMACSS προσδιορίζει 5 τύπους κανόνων στυλ, συγκεκριμένα βάση, διάταξη, ενότητα, κατάσταση, και θέμα.

• Τα βασικά στυλ είναι τα προεπιλεγμένα στυλ που στρέφονται στις βασικές ετικέτες HTML όπως

  , .

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

Οι διαφορετικοί κανόνες στυλ μπορούν να αναγνωριστούν χρησιμοποιώντας ένα πρόθεμα στο όνομα κλάσης, για παράδειγμα, l-header (για διάταξη) ή t-header (για θέμα). Μπορούμε επίσης να οργανώσουμε αυτούς τους διάφορους τύπους κανόνων τοποθετώντας τα σε ξεχωριστά αρχεία και φακέλους.

Πλεονεκτήματα του SMACSS:Καλύτερος οργανωμένος κώδικας.

Μειονεκτήματα της SMACSS: Δεν μπορώ να το σκεφτώ.

Υπάρχει ένα δωρεάν ηλεκτρονικό βιβλίο που μπορείτε να διαβάσετε σχετικά με το SMACSS, ή μπορείτε να αγοράσετε την έκδοση του ebook για να το μελετήσετε περισσότερο.

συμπέρασμα

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

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

• Πλαίσιο OOCSS
• Εργαλεία BEM
• Οργανικό πλαίσιο CSS (ακολουθεί ατομική έννοια).