Η συγγραφή συνεπούς και ευανάγνωστου CSS που θα κλιμακωθεί καλά είναι μια πρόκληση διαδικασία. Ειδικά όταν τα φύλλα στυλ γίνονται μεγαλύτερα, πιο περίπλοκα και δυσκολότερα στη συντήρηση. Ένα από τα εργαλεία που διαθέτουν οι προγραμματιστές για να γράφουν καλύτερα CSS είναι οι προεπεξεργαστές. Ο προεπεξεργαστής είναι ένα πρόγραμμα που λαμβάνει έναν τύπο δεδομένων και το μετατρέπει σε έναν άλλο τύπο δεδομένων, και στην περίπτωσή μας οι προεπεξεργαστές CSS είναι γλώσσες προεπεξεργασίας που έχουν μεταγλωττιστεί στο CSS. Υπάρχουν πολλοί προεπεξεργαστές CSS που προγραμματιστές front-end προτείνουμε και χρησιμοποιούμε, αλλά σε αυτό το άρθρο θα επικεντρωθούμε στο Sass. Ας δούμε τι Ο Sass έχει να προσφέρει , γιατί είναι μια προτιμώμενη επιλογή σε σχέση με άλλους προεπεξεργαστές CSS και πώς να αρχίσετε να το χρησιμοποιείτε με τον καλύτερο τρόπο.
Τι είναι το Sass και γιατί πρέπει να το χρησιμοποιήσετε;
Για όσους από εσάς δεν γνωρίζετε τι είναι το Sass, το καλύτερο σημείο εκκίνησης είναι να επισκεφτείτε το επίσημη ιστοσελίδα Sass . Το Sass είναι ένα αρκτικόλεξο για το Syntactically Awesome StyleSheets και είναι μια επέκταση του CSS που προσθέτει δύναμη και κομψότητα στη βασική γλώσσα.
Με το Sass (Syntactically Awesome StyleSheets) ο κώδικας CSS σας θα είναι επίσης καταπληκτικός. Τιτίβισμα
Το Sass είναι ένας προεπεξεργαστής CSS με πολλά ισχυρά χαρακτηριστικά. Τα πιο αξιοσημείωτα χαρακτηριστικά είναι μεταβλητές , εκτείνεται , και μίξιν .
Οι μεταβλητές αποθηκεύουν πληροφορίες που μπορούν να επαναχρησιμοποιηθούν αργότερα, όπως χρώματα ή άλλες κοινά χρησιμοποιούμενες τιμές. Το Extends σας βοηθά να δημιουργήσετε 'τάξεις' που επιτρέπουν την κληρονομιά για τους κανόνες. Mixins, μπορείτε να σκεφτείτε σαν «λειτουργία». Το Sass έχει επίσης κάποια άλλα εκπληκτικά χαρακτηριστικά σε σύγκριση με άλλους προεπεξεργαστές, όπως τη χρήση λογικών δηλώσεων (υπό όρους και βρόχους), προσαρμοσμένες λειτουργίες, ενοποίηση με άλλες βιβλιοθήκες όπως Πυξίδα , και πολλά άλλα. Αυτές οι δυνατότητες από μόνες τους μπορούν να βοηθήσουν εσάς και την ομάδα σας να γίνετε πιο παραγωγικοί και να γράψετε καλύτερα CSS στο τέλος.
Γιατί χρειάζεστε έναν οδηγό στυλ CSS
Δυστυχώς, ακόμη και οι προεπεξεργαστές δεν μπορούν να διορθώσουν τα πάντα και να σας βοηθήσουν να γράψετε καλό κώδικα CSS. Το πρόβλημα που αντιμετωπίζει κάθε προγραμματιστής είναι ότι οι τρέχουσες διαδικτυακές εφαρμογές γίνονται όλο και μεγαλύτερες. Αυτός είναι ο λόγος για τον οποίο ο κώδικας πρέπει να είναι επεκτάσιμος και αναγνώσιμος και πρέπει να αποφεύγεται κωδικός σπαγγέτι και αχρησιμοποίητες γραμμές του. Για να αποφευχθούν τα αναφερόμενα προβλήματα, απαιτείται κάποιο είδος προτύπου για την ομάδα σας στην καθημερινή εργασία. Τι είναι ο κώδικας σπαγγέτι και πώς συμβαίνει; Ο κωδικός Spaghetti είναι ένα όνομα για κακό, αργό, επαναλαμβανόμενο και μη αναγνώσιμο κώδικα. Όταν μια ομάδα γράφει μεγάλες εφαρμογές χωρίς καθορισμένες οδηγίες ή πρότυπα, κάθε προγραμματιστής γράφει τι χρειάζεται και πώς θέλει. Επίσης, όταν οι προγραμματιστές γράφουν πολλές διορθώσεις σφαλμάτων, επείγουσες επιδιορθώσεις και ενημερώσεις κώδικα, τείνουν να γράφουν κώδικα που θα λύσει το πρόβλημα, αλλά δεν έχουν χρόνο να γράψουν τον κώδικα με τον καλύτερο τρόπο. Σε αυτές τις καταστάσεις, είναι πολύ συνηθισμένο να καταλήγουμε με πολλές γραμμές CSS που δεν χρησιμοποιούνται πλέον σε κανένα τομέα της εφαρμογής. Οι προγραμματιστές δεν έχουν αρκετό χρόνο για να καθαρίσουν τον κώδικα και αναγκάζονται να δημοσιεύσουν την ενημέρωση κώδικα το συντομότερο δυνατό. Μια άλλη κατάσταση επαναπροσδιορισμού είναι ότι για να επιδιορθώσετε γρήγορα τα κατεστραμμένα πράγματα, οι προγραμματιστές χρησιμοποιούν πολλά !important, το οποίο προκύπτει με πολύ χακαρισμένο κώδικα που είναι δύσκολο να διατηρηθεί, προκύπτει με πολλές απροσδόκητες συμπεριφορές και πρέπει να αναθεωρηθεί αργότερα. Όπως αναφέρθηκε ήδη, καθώς ο κώδικας μεγαλώνει, η κατάσταση γίνεται χειρότερη.
Η ιδέα αυτού του άρθρου είναι να μοιραστείτε κανόνες, συμβουλές και βέλτιστες πρακτικές για να γράψετε ένα καλύτερο Sass. Η ομαδοποίηση αυτών των συμβουλών και βέλτιστων πρακτικών Sass μπορεί να χρησιμοποιηθεί ως οδηγός στυλ Sass. Αυτός ο οδηγός στυλ θα βοηθήσει τους προγραμματιστές να αποφύγουν καταστάσεις που αναφέρονται παραπάνω. Οι κανόνες ομαδοποιούνται σε λογικά τμήματα για ευκολότερη αναφορά, αλλά στο τέλος θα πρέπει να υιοθετήσετε και να τα ακολουθήσετε όλα. Ή τουλάχιστον, τα περισσότερα από αυτά.
Οδηγός στυλ
Το σύνολο κανόνων και βέλτιστων πρακτικών σε αυτόν τον οδηγό στυλ υιοθετείται με βάση την εμπειρία εργασίας με πολλές ομάδες. Μερικά από αυτά προέρχονται από δοκιμή κατά λάθος και άλλα εμπνέονται από κάποιες δημοφιλείς προσεγγίσεις όπως το BEM. Για ορισμένους κανόνες δεν υπάρχει συγκεκριμένος λόγος για τον οποίο και πώς τέθηκαν. Μερικές φορές αρκεί η εμπειρία του παρελθόντος ως ο μόνος λόγος. Για παράδειγμα, για να βεβαιωθείτε ότι ο κώδικας είναι αναγνώσιμος, είναι σημαντικό όλοι οι προγραμματιστές να γράφουν τον κώδικα με τον ίδιο τρόπο, επομένως υπάρχει ο κανόνας να μην περιλαμβάνονται κενά μεταξύ παρενθέσεων. Μπορούμε να υποστηρίξουμε εάν είναι καλύτερο να συμπεριλάβουμε το διάστημα μεταξύ παρενθέσεων ή όχι. Εάν πιστεύετε ότι φαίνεται καλύτερα όταν υπάρχουν κενά μεταξύ παρενθέσεων, προσαρμόστε αυτόν τον οδηγό στυλ και τους κανόνες ανάλογα με τις προτιμήσεις σας. Στο τέλος, ο κύριος στόχος του οδηγού στυλ είναι ο καθορισμός κανόνων και η βελτίωση της διαδικασίας ανάπτυξης.
Γενικοί κανόνες CSS
Οι γενικοί κανόνες πρέπει πάντα να τηρούνται. Επικεντρώνονται κυρίως στον τρόπο με τον οποίο πρέπει να μορφοποιηθεί ο κώδικας Sass για να φέρει συνέπεια και αναγνωσιμότητα του κώδικα:
- Για εσοχή, χρησιμοποιήστε κενά αντί για καρτέλες. Η βέλτιστη πρακτική είναι να χρησιμοποιήσετε 2 χώρους. Μπορείτε να εκτελέσετε τον δικό σας ιερό πόλεμο με αυτήν την επιλογή και μπορείτε να ορίσετε τον δικό σας κανόνα και να χρησιμοποιήσετε είτε καρτέλες, είτε κενά, ή ό, τι σας ταιριάζει καλύτερα. Είναι σημαντικό μόνο να ορίσετε έναν κανόνα και να ακολουθήσετε αυτόν τον κανόνα ενώ είστε συνεπείς.
- Συμπεριλάβετε μια κενή γραμμή μεταξύ κάθε δήλωσης. Αυτό κάνει τον κώδικα πιο αναγνώσιμο από τον άνθρωπο και ο κώδικας γράφεται από ανθρώπους, σωστά;
- Χρησιμοποιήστε έναν επιλογέα ανά γραμμή, όπως αυτό:
selector1, selector2 { } - Μην συμπεριλάβετε κενό μεταξύ παρενθέσεων.
selector { @include mixin1($size: 4, $color: red); } - Χρησιμοποιήστε μεμονωμένα εισαγωγικά για να επισυνάψετε συμβολοσειρές και διευθύνσεις URL:
selector { font-family: ‘Roboto’, serif; } - Τερματίστε όλους τους κανόνες με ερωτηματικό χωρίς κενά πριν:
selector { margin: 10px; } Κανόνες για Επιλεκτές
Στη συνέχεια ακολουθούμε ένα σύνολο κανόνων που πρέπει να χρησιμοποιούμε κατά την αντιμετώπιση των επιλογών:
- Αποφύγετε τη χρήση επιλογών ταυτότητας. Τα αναγνωριστικά είναι πολύ συγκεκριμένα και χρησιμοποιούνται κυρίως για ενέργειες JavaScript.
- Αποφύγετε
!important. Εάν πρέπει να χρησιμοποιήσετε αυτόν τον κανόνα, αυτό σημαίνει ότι κάτι δεν πάει καλά με τους κανόνες CSS σας γενικά και ότι το CSS σας δεν είναι καλά δομημένο. CSS με πολλά!importantΟι κανόνες μπορούν εύκολα να καταχραστούν και καταλήγουν σε ακατάστατο και δύσκολο να διατηρηθεί κώδικα CSS. - Μην χρησιμοποιείτε τον επιλογέα παιδιών. Αυτός ο κανόνας έχει τον ίδιο σκεπτικό με τον αναγνωριστικό. Οι θυγατρικοί επιλογείς είναι πολύ συγκεκριμένοι και συνδέονται στενά με τη δομή HTML σας.
Εάν χρησιμοποιείτε πολύ σημαντικό στο CSS σας, το κάνετε λάθος. Τιτίβισμα
Διατηρήστε τους κανόνες Sass σε τάξη
Είναι σημαντικό να διατηρήσετε τη συνέπεια στον κώδικα. Ένας από τους κανόνες είναι ότι πρέπει να διατηρήσετε τη σειρά των κανόνων. Με αυτόν τον τρόπο άλλοι προγραμματιστές μπορούν να διαβάσουν τον κώδικα με πολύ περισσότερη κατανόηση και θα ξοδέψουν λιγότερο χρόνο για να βρουν το δρόμο τους. Εδώ είναι η προτεινόμενη σειρά:
- Χρήση
@extendπρώτα. Αυτό σας ενημερώνει αρχικά ότι αυτή η τάξη κληρονομεί κανόνες από αλλού. - Χρήση
@includeΕπόμενο. Η συμπερίληψη των συνδυασμών και των λειτουργιών σας στην κορυφή είναι ωραία, και σας επιτρέπει επίσης να γνωρίζετε τι θα αντικαταστήσετε (εάν χρειάζεται). - Τώρα μπορείτε να γράψετε την κανονική τάξη CSS ή τους κανόνες στοιχείων.
- Τοποθετήστε ένθετα ψευδοκλάσματα και ψευδο στοιχεία πριν από οποιοδήποτε άλλο στοιχείο.
- Τέλος, γράψτε άλλους ένθετους επιλογείς όπως στο ακόλουθο παράδειγμα:
.homepage { @extend page; @include border-radius(5px); margin-left: 5px; &:after{ content: ‘’; } a { } ul { } } Μερικές συμβάσεις ονομασίας
Η ονομασία συμβάσεων μέρος του βιβλίου στυλ βασίζεται στα δύο υπάρχοντα ΚΑΛΟΣ και SMACSS συμβάσεις ονομασίας που έγιναν δημοφιλείς μεταξύ των προγραμματιστών. Το BEM σημαίνει Block, Element, Modifier. Αναπτύχθηκε από την ομάδα YANDEX και η ιδέα πίσω από το BEM ήταν να βοηθήσει τους προγραμματιστές να κατανοήσουν τη σχέση μεταξύ HTML και CSS στο έργο. Το SMACSS από την άλλη πλευρά σημαίνει κλιμακούμενη και αρθρωτή αρχιτεκτονική για CSS. Είναι ένας οδηγός για τη δομή CSS που επιτρέπει τη συντηρησιμότητα.
Εμπνευσμένοι από αυτούς, οι κανόνες συμβάσεων ονοματολογίας είναι οι εξής:
- Χρησιμοποιήστε το πρόθεμα για κάθε τύπο στοιχείου. Προσθέστε τα μπλοκ σας, όπως: layout (
l-), modules (m-) και καταστάσεις (is-). - Χρησιμοποιήστε δύο κάτω παύλες για παιδικά στοιχεία για κάθε μπλοκ:
.m-tab__icon {} - Χρησιμοποιήστε δύο παύλες για τροποποιητές για κάθε μπλοκ:
.m-tab--borderless {} Μεταβλητές
Χρησιμοποιήστε μεταβλητές. Ξεκινήστε με τις πιο γενικές και καθολικές μεταβλητές όπως τα χρώματα και δημιουργήστε ένα ξεχωριστό αρχείο για αυτές _colors.scss. Εάν παρατηρήσετε ότι επαναλαμβάνετε κάποια τιμή στο φύλλο στυλ πολλές φορές, μεταβείτε και δημιουργήστε μια νέα μεταβλητή για αυτήν την τιμή. Σας παρακαλούμε ΞΗΡΟΣ . Θα είστε ευγνώμονες όταν θέλετε να αλλάξετε αυτήν την τιμή και πότε θα πρέπει να την αλλάξετε σε ένα μόνο μέρος.
Επίσης, χρησιμοποιήστε μια παύλα για να ονομάσετε τις μεταβλητές σας:
$red : #f44336; $secondary-red :#ebccd1; Ερωτήματα πολυμέσων
Με το Sass μπορείτε να γράψετε τα ερωτήματα πολυμέσων σας ως ερωτήματα στοιχείων. Οι περισσότεροι προγραμματιστές γράφουν ερωτήματα πολυμέσων σε ξεχωριστό αρχείο ή στο κάτω μέρος των κανόνων μας, αλλά αυτό δεν συνιστάται. Με το Sass μπορείτε να γράψετε πράγματα όπως το ακόλουθο παράδειγμα τοποθετώντας ερωτήματα πολυμέσων:
// ScSS .m-block { &:after { @include breakpoint(tablet){ content: ''; width: 100%; } } } Αυτό δημιουργεί ένα CSS ως εξής:
κατανόηση κώδικα c++
// Generated CSS @media screen and (min-width: 767px) { .m-block:after { content: ''; width: 100%; } } Αυτοί οι κανόνες ένθετων ερωτημάτων πολυμέσων σάς επιτρέπουν να γνωρίζετε πολύ καθαρά τους κανόνες που αντικαθιστάτε, όπως μπορείτε να δείτε στο απόσπασμα Sass όπου χρησιμοποιούνται τα ονομαστικά ερωτήματα πολυμέσων.
Για να δημιουργήσετε ερωτήματα με ονόματα μέσων, δημιουργήστε το mixin σας ως εξής:
@mixin breakpoint($point) { @if $point == tablet { @media (min-width: 768px) and (max-width: 1024px) { @content; } } @else if $point == phone { @media (max-width: 767px) { @content; } } @else if $point == desktop { @media (min-width: 1025px) { @content; } } } Μπορείτε να διαβάσετε περισσότερα σχετικά με την ονομασία ερωτημάτων πολυμέσων στα ακόλουθα άρθρα: Ονομασία ερωτημάτων μέσων και Γράψτε καλύτερα ερωτήματα πολυμέσων με Sass .
Άλλες εκτιμήσεις
Στο τέλος, ακολουθούν ορισμένες άλλες σκέψεις που πρέπει επίσης να έχετε υπόψη και να ακολουθείτε:
- Μην γράφετε ποτέ προθέματα προμηθευτή. Χρήση αυτόματης επιδιόρθωσης αντι αυτου.
- Χρησιμοποιήστε έως και τρία επίπεδα βάθους σε ένθετους κανόνες. Με περισσότερα από τρία ένθετα επίπεδα, ο κώδικας θα είναι δύσκολο να διαβαστεί και ίσως γράφετε έναν άθλιο επιλογέα. Στο τέλος, γράφετε κώδικα CSS για σύζευξη με τον HTML σας.
.class1 { .class2 { li { //last rules } } } - Μην γράφετε περισσότερες από 50 γραμμές ένθετου κώδικα: Ή καλύτερα, μην γράφετε περισσότερες από X γραμμές ένθετου κώδικα. Ρυθμίστε το δικό σας X, αλλά το 50 μοιάζει με ένα καλό όριο. Εάν περάσετε αυτό το όριο ίσως το μπλοκ του κώδικα δεν θα χωράει στο παράθυρο του προγράμματος επεξεργασίας κειμένου.
- Γράψτε ένα κύριο αρχείο όπου θα εισαγάγετε όλα τα μπλοκ, τα τμήματα και τις διαμορφώσεις σας.
- Εισαγάγετε πρώτα εξαρτήσεις προμηθευτή και καθολικού, στη συνέχεια εξαρτημένες εξουσιοδοτημένες, έπειτα διατάξεις, μοτίβα και τέλος τα μέρη και τα μπλοκ. Αυτό είναι σημαντικό για να αποφευχθούν οι μικτές εισαγωγές και η αντικατάσταση των κανόνων, επειδή δεν μπορούμε να διαχειριζόμαστε από τους προμηθευτές και τους παγκόσμιους κανόνες.
- Μην ντρέπεστε και σπάστε τον κωδικό σας σε όσο το δυνατόν περισσότερα αρχεία.
συμπέρασμα
Η ιδέα πίσω από αυτόν τον οδηγό στυλ είναι να σας δώσει κάποιες συμβουλές για το πώς να βελτιώσετε τον τρόπο που γράφετε τον κωδικό Sass. Λάβετε υπόψη ότι ακόμα κι αν δεν χρησιμοποιείτε το Sass, οι παρεχόμενες συμβουλές και οι κανόνες σε αυτόν τον οδηγό στυλ ισχύουν και συνιστάται να ακολουθήσετε εάν χρησιμοποιείτε Vanilla CSS ή άλλο προεπεξεργαστή. Και πάλι, εάν δεν συμφωνείτε με κανέναν από τους κανόνες, αλλάξτε τον κανόνα για να ταιριάζει στον τρόπο σκέψης σας. Στο τέλος, εναπόκειται σε εσάς και την ομάδα σας να προσαρμόσετε αυτόν τον οδηγό στυλ, να χρησιμοποιήσετε κάποιον άλλο οδηγό στυλ ή να δημιουργήσετε έναν εντελώς νέο. Απλώς ορίστε τον οδηγό και ξεκινήστε να γράφετε έναν καταπληκτικό κωδικό.
Σχετίζεται με: * Εξερεύνηση SMACSS: Επεκτάσιμη και αρθρωτή αρχιτεκτονική για CSS *
