(S) CSS Βέλτιστες πρακτικές που δεν γνωρίζετε ακόμα

Εικονογράφηση από τον Paula Jenda

Ακόμα κι αν τώρα δημιουργείτε τις εφαρμογές σας χρησιμοποιώντας ένα δημοφιλές πλαίσιο, όπως το React, το Angular ή το Vue.js, θα πρέπει ακόμα να προσθέσετε κάποια στυλ σε αυτά. Ανάλογα με την τεχνολογία που χρησιμοποιείτε, πρέπει να γράψετε τα στυλ σας με έναν συγκεκριμένο τρόπο. Για παράδειγμα, για το React, λόγω της φύσης της συνιστώσας, είναι καλύτερο να γράφετε στυλ χρησιμοποιώντας τις ενότητες CSS. Εάν θέλετε να χρησιμοποιήσετε ολοκαίνουργιες δυνατότητες CSS, θα ήταν συνετό να χρησιμοποιήσετε το CSSNext. Μην ξεχάσετε τους καλούς επεξεργαστές CSS, όπως το Sass ή λιγότερο. Μπορείτε να σκεφτείτε - τόσα πολλά εργαλεία, στοιχηματίζω στυλ γραφής είναι διαφορετική για κάθε ένα από αυτά. Ναι έχεις δίκιο. Αλλά τα βασικά είναι τα ίδια.

Σε αυτό το άρθρο, θέλω να παρουσιάσω μερικές ωραίες συμβουλές για τη σύνταξη αξιόπιστου και διατηρήσιμου CSS, ανεξάρτητα από το αν είσαι fan του CSS modules ή Sass / LESS. Αυτές οι συμβουλές παρουσιάζονται στη σύνταξη SCSS, οπότε αν χρειαστεί κάποια εισαγωγή στο Sass, εδώ είναι ένα καλό μέρος για να ξεκινήσετε. Εάν χρησιμοποιείτε απλό CSS, που επεκτείνεται από το CSS Next, αυτό το άρθρο είναι για εσάς επίσης. Αυτές οι βασικές έννοιες μπορούν εύκολα να χρησιμοποιηθούν σε άλλα εργαλεία CSS ή προεπεξεργαστές.

Δομήστε τα στυλ σας

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

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

Παρακάτω είναι μια δομή φακέλου παραδειγμάτων:

Και main.scss:

Ονομάστε τα χρώματα

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

Στο Sass μπορείτε να αποθηκεύσετε οποιαδήποτε τιμή ως μεταβλητή, οπότε είναι εύλογο να αποθηκεύσετε την τιμή χρώματος ως μεταβλητή. Συνήθως, χρησιμοποιούμε HEX (hexadecimals) για να ορίσουμε την τιμή χρώματος. Για τον άνθρωπο, το HEX μοιάζει με το cypher, επειδή είναι μια μορφή σχεδιασμένη για υπολογιστές. Είναι δύσκολο να πείτε ποιο χρώμα γράφεται ως # 7fffd4 ή # ffd700 (αν τα καταλάβετε, είναι πιθανό να αποτύχει η δοκιμή CAPTCHA). Το πρώτο είναι το γαλαζοπράσινο και το δεύτερο είναι το χρυσό. Δεν θα ήταν ευκολότερο να έχουν αυτά τα χρώματα ονομάζονται με αυτόν τον τρόπο;

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

Πρώτον, θα πρέπει να αρχίσετε να ονομάζετε τα χρώματα σας. Σίγουρα, είναι δύσκολο να μεταφράσουμε την τιμή HEX σε αναγνωρίσιμο από τον άνθρωπο όνομα. Ευτυχώς, έχουμε τα κατάλληλα εργαλεία για αυτό. Χρησιμοποιώ τον ιστότοπο Name that Color, αλλά μπορείτε να χρησιμοποιήσετε οποιοδήποτε άλλο εργαλείο προτιμάτε.

Όταν έχετε ονόματα για τα χρώματα σας, μπορείτε να τους δώσετε ρόλους. Πρέπει να ορίσετε ποιο χρώμα χρησιμοποιείται ως πρωτεύον και ποιο χρώμα είναι δευτερεύον. Εάν δεν είστε σίγουροι πώς να ορίσετε ρόλους για τα χρώματα σας, μπορείτε να πάρετε κάποια έμπνευση από το σχέδιο χρώματος του Bootstrap.

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

Ευθυγραμμίστε τις ένθετες δηλώσεις

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

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

Δείτε ένα παράδειγμα παρακάτω:

Μην χρησιμοποιείτε υπερβολικά την αναφορά γονέων

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

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

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

Γράψτε τις ιδιότητες με ουσιαστική σειρά

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

  • Κουτί (θέση, προβολή, πλάτος, περιθώριο κ.λπ.)
  • Κείμενο
  • Ιστορικό
  • Σύνορο
  • Άλλο (αλφαβητικά)

Χρησιμοποιήστε τη σύμβαση ονοματολογίας κατηγορίας

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

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

Ακολουθεί ένα παράδειγμα:

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

Ακολουθεί το παράδειγμά μας, μετά από τη ζόμπι:

Γράψτε περιγραφικά ερωτήματα μέσων

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

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

Για να καταστήσουμε τα ερωτήματα των μέσων πιο φιλικά προς τον προγραμματιστή μπορούμε να καθορίσουμε τους κανόνες του σε μια μεταβλητή. Στο Sass είναι δυνατό να χρησιμοποιήσετε τη συμβολοσειρά ως κανονικό κώδικα CSS χρησιμοποιώντας τις παρεμβολές παρεμβολής # {}.

Το ίδιο τέχνασμα μπορούμε να χρησιμοποιήσουμε για άλλους κανόνες. Μπορεί να είναι βολικό για τον καθορισμό σύνθετων κανόνων @supports.

Προσθέστε αρθρωτά στυλ

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

Ας φανταστούμε ότι θα θέλατε να γράψετε στυλ που εφαρμόζονται μόνο όταν κάποιο στοιχείο προηγείται του στοιχείου του επιλογέα. Για παράδειγμα, μπορείτε να προσθέσετε περιθώριο στο κείμενο του άρθρου, όταν έχει τίτλο. Εδώ μπορείτε να το κάνετε:

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

Περαιτέρω ανάγνωση

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

  • Μεταβλητές χρώματος Sass που δεν απορροφούν ο Landon Schropp
  • Σύνθετη SCSS ή 16 Cool Things που μπορεί να μην γνωρίζετε τα φύλλα στυλ σας θα μπορούσε να κάνει ο Jarno Rantanen
  • Παρακείμενες προδιαγραφές επιλογής αδελφών από το W3C
  • Συνδυασμένες συμβάσεις ονομασίας CSS από τον John W. Long
  • Ανταπόκριση στο Web Design στο Sass από τον Mason Wendell
  • Πώς να σχεδιάσετε ένα έργο Sass από τον John W. Long

Σου αρεσε? Πατήστε το κουμπί!! Ευχαριστώ!

Μπορείτε να με βρείτε στο Twitter και στο Github.