Ένα 5λεπτο Εισαγωγή στα Στοιχειωμένα Στοιχεία

Το CSS είναι περίεργο. Μπορείτε να μάθετε τα βασικά του σε 15 λεπτά. Αλλά μπορεί να χρειαστούν αρκετά χρόνια πριν καταλάβετε έναν καλό τρόπο να οργανώσετε τα στυλ σας.

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

Χαοτικό φύλλο στυλ

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

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

Το νέο κύμα του CSS

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

Το Styled Components είναι μία από αυτές τις βιβλιοθήκες και έχει προσελκύσει γρήγορα μεγάλη προσοχή λόγω του συνδυασμού καινοτομίας και οικειότητας. Έτσι, εάν χρησιμοποιείτε το React (και αν δεν το κάνετε, ελέγξτε το σχέδιο μελέτης JavaScript και την εισαγωγή μου στο React), είναι σίγουρα αξίζει να ρίξετε μια ματιά σε αυτή τη νέα εναλλακτική λύση CSS.

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

Εξαρτήματα, με στυλ

Το κύριο πράγμα που πρέπει να καταλάβετε για τα Styled Components είναι ότι το όνομά του πρέπει να ληφθεί αρκετά κυριολεκτικά. Δεν μπορείτε πλέον να σχεδιάζετε στοιχεία HTML ή στοιχεία βασισμένα στο στοιχείο κλάσης ή HTML:

Hello World

h1.title {
  μέγεθος γραμματοσειράς: 1.5em;
  χρώμα: μωβ;
}}

Αντ 'αυτού, ορίζετε τα στυλ στοιχεία που διαθέτουν τα δικά τους ενσωματωμένα στυλ. Στη συνέχεια, τα χρησιμοποιείτε ελεύθερα σε όλο τον κωδικό σας:

Εισαγωγή στυλ από "στυλ-συστατικά"?
const Τίτλος = styled.h1`
  μέγεθος γραμματοσειράς: 1.5em;
  χρώμα: μωβ;
';
<Τίτλος> Hello World 

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

Με άλλα λόγια, ξεφορτώνουμε τις τάξεις CSS ως ενδιάμεσο βήμα μεταξύ του στοιχείου και των στυλ του.

Ως συνθέτης στυλ-συνθέτη Max Stoiber λέει:

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

Εκφόρτωση Πολυπλοκότητας

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

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

Υποστηρίξεις πέρα ​​από τις τάξεις

Σύμφωνα με αυτή τη φιλοσοφία χωρίς τάξεις, τα στυλ-εξαρτήματα κάνουν χρήση υποδειγμάτων σε τάξεις όταν πρόκειται για την προσαρμογή της συμπεριφοράς ενός εξαρτήματος. Έτσι, αντί:

Hello World // θα είναι μπλε

h1.title {
  μέγεθος γραμματοσειράς: 1.5em;
  χρώμα: μωβ;
  
  &.πρωταρχικός{
    χρώμα: μπλε;
  }}
}}

Θα γράψετε:

const Τίτλος = styled.h1`
  μέγεθος γραμματοσειράς: 1.5em;
  χρώμα: $ {props => props.primary; 'μπλε': 'μοβ'};
';
 Hello World </ Title> // θα είναι μπλε</pre><p>Όπως βλέπετε, τα συστατικά με στυλ σάς επιτρέπουν να καθαρίσετε τα στοιχεία του React διατηρώντας όλες τις λεπτομέρειες εφαρμογής σχετικά με το CSS και την HTML.</p><p>Τούτου λεχθέντος, τα στυλ στοιχεία CSS είναι ακόμα CSS. Έτσι πράγματα όπως αυτό είναι επίσης εντελώς έγκυρο (αν και ελαφρώς μη-ιδιωματικό) κώδικα:</p><pre>const Τίτλος = styled.h1`
  μέγεθος γραμματοσειράς: 1.5em;
  χρώμα: μωβ;
  
  &.πρωταρχικός{
    χρώμα: μπλε;
  }}
';</pre><pre><Title className = "primary"> Hello World </ Title> // θα είναι μπλε</pre><p>Αυτό είναι ένα χαρακτηριστικό που κάνει τα στυλ-συστατικά πολύ εύκολο να μπει σε: όταν αμφιβάλλει, μπορείτε πάντα να επιστρέψετε σε αυτό που ξέρετε!</p><h3>Προειδοποιήσεις</h3><p>Είναι επίσης σημαντικό να αναφέρουμε ότι τα στυλ-εξαρτήματα εξακολουθούν να είναι ένα νέο έργο και ότι ορισμένα χαρακτηριστικά δεν υποστηρίζονται ακόμη πλήρως. Για παράδειγμα, αν θέλετε να στυλίσατε ένα παιδικό στοιχείο από έναν γονέα, θα πρέπει να βασιστείτε στη χρήση των κατηγοριών CSS για τώρα (τουλάχιστον έως ότου βγει το στυλ των στοιχείων v2).</p><p>Επίσης, δεν υπάρχει κανένας "επίσημος" τρόπος για την προ-απόδοση του CSS σας στον διακομιστή ακόμα, αν και είναι σίγουρα δυνατή με την έγχυση των στυλ χειροκίνητα.</p><p>Και το γεγονός ότι τα στυλιζαρισμένα συστατικά δημιουργούν τα δικά τους τυχαία ονόματα κλάσεων μπορεί να δυσκολευτεί να χρησιμοποιήσει τα εργαλεία dev του φυλλομετρητή σας για να καταλάβει πού καθορίστηκαν αρχικά τα στυλ σας.</p><p>Αλλά αυτό που είναι πολύ ενθαρρυντικό είναι ότι η κεντρική ομάδα των στυλιστικών στοιχείων έχει επίγνωση όλων αυτών των ζητημάτων και είναι δύσκολο να εργαστεί για να τα καθορίσει ένα προς ένα. Η έκδοση 2 έρχεται σύντομα και πραγματικά ανυπομονώ για αυτό!</p><h3>Μάθε περισσότερα</h3><p>Ο στόχος μου εδώ δεν είναι να εξηγήσω λεπτομερώς πώς λειτουργούν τα στυλ στοιχεία, αλλά περισσότερα για να σας δώσουν μια μικρή ματιά ώστε να μπορείτε να αποφασίσετε μόνοι σας αν αξίζει τον έλεγχο.</p><p>Αν κατάφερα να σας κάνω περίεργο, εδώ μερικά μέρη όπου μπορείτε να μάθετε περισσότερα σχετικά με τα στυλ στοιχεία:</p><ul><li>Ο Max Stoiber έγραψε πρόσφατα ένα άρθρο σχετικά με τον λόγο για τα στυλ στοιχεία για το Smashing Magazine.</li><li>Το ίδιο το ρεπορτάζ με στυλ-συστατικά έχει μια εκτεταμένη τεκμηρίωση.</li><li>Αυτό το άρθρο του Jamie Dixon περιγράφει μερικά οφέλη από τη μετάβαση σε στυλ-εξαρτήματα.</li><li>Αν θέλετε να μάθετε περισσότερα σχετικά με την πραγματική εφαρμογή της βιβλιοθήκης, δείτε αυτό το άρθρο από τον Max.</li></ul><p>Και αν θέλετε να προχωρήσετε ακόμα περισσότερο, μπορείτε επίσης να ελέγξετε τη Glamour, μια διαφορετική απόκτηση του νέου κύματος CSS!</p><p>Χρόνος αυτοπροβολής: αναζητούμε συνεισφέροντες ανοιχτού κώδικα για να βοηθήσουμε με τη Nova, τον ευκολότερο τρόπο δημιουργίας πλήρους στοίβας εφαρμογών React & GraphQL με φόρμες, φόρτωση δεδομένων και λογαριασμούς χρηστών. Δεν χρησιμοποιούμε ακόμα στυλ στοιχεία, αλλά θα μπορούσατε να τα χρησιμοποιήσετε πρώτα!</p></div><ins data-zxname="zx-adnet" data-zxadslot="ZX-SMR53" data-zxw="970" data-zxh="250" data-overlay="true"></ins><div class="neighbor-articles"><h4 class="ui header">Δείτε επίσης</h4><a href="/design/building-a-color-palette-framework-76db07/" title="Δημιουργία πλαισίου παλέτας χρωμάτων">Δημιουργία πλαισίου παλέτας χρωμάτων</a><a href="/design/design-thinking-a-manual-for-innovation-d0eeae/" title="Σχεδιασμός Σκέψης: Ένα Εγχειρίδιο Καινοτομίας">Σχεδιασμός Σκέψης: Ένα Εγχειρίδιο Καινοτομίας</a><a href="/design/mind-the-gap-41a878/" title="Προσοχή στο κενό">Προσοχή στο κενό</a><a href="/design/how-we-designed-page-previews-for-wikipedia-and-what-could-be-done-with-them-in-the-future-af861f/" title="Πώς σχεδιάσαμε τις προεπισκοπήσεις σελίδων για το Wikipedia - και τι θα μπορούσε να γίνει με αυτούς στο μέλλον">Πώς σχεδιάσαμε τις προεπισκοπήσεις σελίδων για το Wikipedia - και τι θα μπορούσε να γίνει με αυτούς στο μέλλον</a><a href="/design/introducing-boosts-an-all-new-way-to-show-your-support-in-basecamp-fde145/" title="Παρουσιάζοντας το Boosts: ένας εντελώς νέος τρόπος να δείξετε την υποστήριξή σας στο Basecamp">Παρουσιάζοντας το Boosts: ένας εντελώς νέος τρόπος να δείξετε την υποστήριξή σας στο Basecamp</a></div></main><div class="push"></div></div><footer><div class="flags-footer"><a href="https://vi.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="vn flag"></i></a><a href="https://uk.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="ua flag"></i></a><a href="https://tr.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="tr flag"></i></a><a href="https://th.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="th flag"></i></a><a href="https://sv.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="ch flag"></i></a><a href="https://sr.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="rs flag"></i></a><a href="https://sl.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="si flag"></i></a><a href="https://sk.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="sk flag"></i></a><a href="https://ru.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="ru flag"></i></a><a href="https://ro.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="ro flag"></i></a><a href="https://pt.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="pt flag"></i></a><a href="https://pl.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="pl flag"></i></a><a href="https://de.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="de flag"></i></a><a href="https://ar.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="sa flag"></i></a><a href="https://bg.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="bg flag"></i></a><a href="https://cs.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="cz flag"></i></a><a href="https://highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="dk flag"></i></a><a href="https://es.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="es flag"></i></a><a href="https://et.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="ee flag"></i></a><a href="https://fi.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="fi flag"></i></a><a href="https://fr.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="fr flag"></i></a><a href="https://hi.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="in flag"></i></a><a href="https://hr.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="hr flag"></i></a><a href="https://hu.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="hu flag"></i></a><a href="https://id.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="id flag"></i></a><a href="https://it.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="it flag"></i></a><a href="https://ja.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="jp flag"></i></a><a href="https://ko.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="kr flag"></i></a><a href="https://lt.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="lt flag"></i></a><a href="https://lv.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="lv flag"></i></a><a href="https://ms.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="my flag"></i></a><a href="https://nl.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="nl flag"></i></a><a href="https://no.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="no flag"></i></a><a href="https://uz.highresolution-wallpapers.net/design/a-5-minute-intro-to-styled-components-5b3a4c/"><i class="uz flag"></i></a></div>highresolution-wallpapers.net<!-- --> © <!-- -->2020<!-- --> </footer></div></div></div></body></html>