Μια απάντηση στο "Πώς να φτάσετε στο CSS"

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

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

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

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

Αυτό που είναι ενδιαφέρον όμως είναι το "Πώς μπορώ να φτάσω καλά γρήγορα" ή "Πώς μπορώ να οργανώσω τον κώδικα μου". Ένας τύπος ερωτήσεων, που δεν είναι ευπρόσδεκτοι στο StackOverflow, όπως ίσως γνωρίζετε καθώς δεν είναι αρκετά συγκεκριμένοι.

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

Κατανοήστε τις έννοιες

Αυτό είναι σημαντικό. Πιάστε τη μεγαλύτερη εικόνα.

Πιθανότατα γνωρίζετε ποιο είναι το χρώμα φόντου, ίσως γνωρίζετε τι κάνει το transformX, το float, το flexbox και το πλέγμα. Μπορείτε να διαβάσετε σχετικά με αυτά, πώς να χρησιμοποιήσετε και να εφαρμόσετε. Αυτό δεν είναι το δύσκολο κομμάτι. (+ υπάρχει google για βοήθεια.)

Αλλά αυτό που οι περισσότεροι άνθρωποι αγωνίζονται είναι πως τα πάντα συνδέονται μεταξύ τους. Γιατί κάποιες αποφάσεις γίνονται και γιατί οι άνθρωποι αγαπούν να εφεύρουν τα δικά τους πλαίσια και να ονομάζουν συμβάσεις.

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

Πρώτα απ 'όλα, ας αρχίσουμε με τον τρόπο με τον οποίο μπορούμε να βρούμε σωστά τα βασικά στοιχεία.

Υπάρχουν πολλές ιδιότητες CSS εκεί έξω. Δεν πρέπει να πάτε και να τα απομνημονεύσετε όλα. Η ίδια η σελίδα ονομάζεται "αναφορά". Δεν είστε στο σχολείο, κανείς δεν θα σας ζητήσει να ονομάσετε όλες τις ρυθμίσεις των συνόρων που μπορείτε να ορίσετε μέσω του φύλλου στυλ σας.

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

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

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

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

https://xkcd.com/1350/

Πρέπει να γράψετε πολλούς κώδικες

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

Τι να γράψετε ακριβώς;

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

Κοιτάξτε πώς το κάνουν τα μεγάλα παιδιά

Εάν είναι η πρώτη, πιθανότατα έχετε αρκετό χρόνο στη διάθεσή σας. Και αυτό είναι καλό, αυτό σημαίνει ότι είστε ελεύθεροι να κάνετε ό, τι θέλετε.

Και αυτό αισθάνεται φοβερό, πολλοί θα σας ζηλέψουν.

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

Ορισμένες οδηγίες σχετικά με το τι πρέπει να αναζητήσετε:

  • Χρησιμοποίησαν κάποια συγκεκριμένη σύμβαση ονομασίας; Εταιρείες όπως το Airbnb, το BBC και άλλοι έχουν δημόσιες οδηγίες κώδικα, μπορείτε να τους αναζητήσετε.
  • Μήπως αντικαθιστούν πολλά κώδικα; Δείτε πόσες ιδιότητες αντικαθίστανται από μια συγκεκριμένη κλάση. Όσο λιγότερο - το καλύτερο, δείτε πώς το πέτυχαν αυτό.
  • Πώς επιτεύχθηκε κάτι πραγματικά; Ένα απλό κείμενο στα αριστερά και η εικόνα στα δεξιά μπορεί να αποδειχθεί πολύ δύσκολο όταν η εικόνα επιπλεύσει έξω από το δοχείο του ιστότοπου, κολλάει στο κάτω μέρος του τμήματος και επικαλύπτει την κορυφή, ενώ το κείμενο είναι κεντρικά κεντρικό και όλα αυτό ανταποκρίνεται.
  • Βρείτε τη διαφορά μεταξύ του κώδικα και της δικής σας. Χρησιμοποιείτε περισσότερους πλωτήρες, περισσότερη τοποθέτηση, περισσότερους hacks; Είναι πολύ πιθανό ότι αυτό που κάνετε κάθε μέρα μπορεί να γραφτεί με πολύ απλούστερο τρόπο.

Αλλά όλα αυτά γίνονται βαρετά. Δεν μπορείτε να φτάσετε καλά διαβάζοντας μόνο, πρέπει να κάνετε κάτι. Και εδώ μπορείτε να κάνετε κάθε φορά:

Στη συνέχεια, προσπαθήστε να το κάνετε μόνοι σας

Ανοίξτε ντρίμπλα για παράδειγμα. Υπάρχουν τόσα πολλά εκπληκτικά σχέδια! Τι κάνεις με αυτούς; Εφαρμογή τους. Διαλέξτε εύκολα και δοκιμάστε να κάνετε τα πάντα τέλεια σε όλες τις οθόνες.

Γιατί; Επειδή φαίνεται καλό, και θα νιώσετε υπέροχα όταν το βλέπετε να λειτουργεί.

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

Δείτε το στη διεύθυνση: https://dribbble.com/shots/3466131-Prism-Web-Theme-Template-designerbundle-com

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

Γιατί; Γιατί είναι δύσκολο. Θα σας κάνει να σκεφτείτε πολύ περισσότερα για τον τρόπο οργάνωσης της σήμανσης και των στυλ. Προσπαθήστε να το πάρετε pixel τέλεια! Σημεία μπόνους για κινούμενα σχέδια.

Ή αν είστε και σχεδιαστής, χρησιμοποιήστε τα δικά σας σχέδια για να τα κωδικοποιήσετε. Είναι επίσης μια εξαιρετική πρακτική. Είναι αυτό που έκανα και εγώ όταν έκανα τον επανασχεδιασμό μου για την επιλογή του πρωταθλητή League of Legends μερικά χρόνια πίσω.

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

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

Ελέγξτε τον κωδικό σας

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

Τι σου έκανε να ξαναγράψεις μερίδες; Τι σας έκανε να προσθέσετε το τρομακτικό! Σημαντικό; Αγωνίσατε με τα ερωτήματα των μέσων μαζικής ενημέρωσης; Έχετε γράψει 4-5 επίπεδα βαθιά επιλογείς;

Υπάρχουν πολλές βέλτιστες πρακτικές που πρέπει να αναζητήσετε. Εδώ είναι μερικά από αυτά:

  1. 20 Protips για τη συγγραφή σύγχρονου CSS
  2. Συνδυασμένες συμβάσεις ονομασίας CSS
  3. Ή αυτή η τεράστια κατευθυντήρια γραμμή για σχεδόν όλα τα CSS.

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

Θα πρέπει να σχεδιάσετε μπροστά από την αρχή!

Πώς θα συνεργάζονται τα εξαρτήματα; Τι είναι το ένθετο, τι θα κληρονομήσει τα στυλ;

Πρέπει να μάθετε να σχεδιάζετε καλά

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

Ποια είναι τα στοιχεία, πού χρησιμοποιούνται περισσότερο από μία φορά. Είναι διαφορετικά κάπως; Είναι διαφορετικοί από τους ίδιους κανόνες;

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

Σημειώστε το

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

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

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

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

  • Και πάλι, οι δομοστοιχειωτές συμβάσεις ονομασίας από το blog του Sass
  • Εισαγωγή στο αντικειμενοστραφής CSS (OOCSS)
  • SMACSS
  • BEM
Πώς αισθάνεται να αγωνίζεται με το CSS όταν δεν οργανώνεται τίποτα. Η αντικατάσταση, η τροποποίηση, η τροποποίηση και η προσθήκη περισσότερων και περισσότερων ιδιοτήτων θα οδηγήσει συχνά σε ένα χάος που σπάει εύκολα.

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

Δεν μπορείτε να χρησιμοποιήσετε κανένα από αυτά, αλλά είναι σημαντικό να γνωρίζετε τον λόγο για τον οποίο υπάρχουν.

TL · DR

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

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

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

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