Πώς να γίνετε πλοίαρχος σε CSS σε 5 απλά βήματα

Όπως γνωρίζετε, έφυγα πρόσφατα από τη ζώνη άνεσής μου, έκλεισα το Android Studio και βυθίστηκα κατευθείαν σε μια τρομακτική, τραχύ θάλασσα που ονομάζεται Web Development. Ένα αναπόσπαστο μέρος της οικοδόμησης εφαρμογών ιστού συνεργάζεται με το CSS. Για όσους δεν είναι εξοικειωμένοι με το Cascading Style Sheet - αυτό είναι το πώς οι web developers σχεδιάζουν τις ιστοσελίδες τους, τους δίνουν κάποια ζωή και δομή, προσθέτουν κινούμενα σχέδια και χάνουν τη λογική τους ενώ κάνουν.

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

1. Χάσε τη διαίσθησή σου

Απλά πρέπει να προσθέσετε ένα ακόμα κουμπί στο τέλος της φόρμας, πόσο δύσκολο μπορεί να γίνει, σωστά; ΠΑΡΑΚΑΛΩ μην πείτε "ΔΕΞΙΑ"!

Για παράδειγμα, το CSS δεν συμπαθεί τη δεξιά πλευρά, θα προτιμά πάντα αριστερά. Γιατί όταν θα προσθέσετε float: δεξιά; κάτι λάθος είναι βέβαιο ότι θα συμβεί. Μερικά στοιχεία θα αλλάξουν τις θέσεις τους. Κάποιες διαιρέσεις θα πάνε ο ένας στον άλλο. ορισμένες παλιές εκδόσεις του IE πρόκειται να εμφανίσουν τη σελίδα σας ανάποδα. Γιατί; Δεν γνωρίζω.

Πώς να το λύσετε; Πιθανότατα πρέπει να προσθέσετε υπερχείλιση: κρυμμένη στο γονικό στοιχείο (ή προσθέτοντας dummy div για να καθαρίσετε το floating, φυσικά). Γιατί; Και πάλι, δεν ξέρω.

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

Ο κύκλος ζωής της περιόδου σύνδεσης CSS (πηγή: tech life as graph)

2. Εκπαιδεύστε τακτικά τον διαλογισμό

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

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

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

πηγή: giphy

3. Μην ανανεώνετε τη σελίδα σας. Πάντα.

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

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

Έχω μια θεωρία ότι έτσι ξεκίνησε η εφαρμογή μιας σελίδας.

4. Εγγραφείτε σε ορισμένα ενημερωτικά δελτία.

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

Ο καλύτερος τρόπος να είστε πάνω από τα νέα εργαλεία και ιδέες είναι να εγγραφείτε σε ένα ή περισσότερα ενημερωτικά δελτία.

Με αυτόν τον τρόπο θα μπορείτε να πείτε πράγματα όπως: "Ω, εξακολουθείτε να χρησιμοποιείτε το Flexbox; Απλώς χρησιμοποιώ το CSS πλέγμα τώρα. τα σκατά του "όταν το PR σας έσφαλε εντελώς τη διάταξη της σελίδας και δεν ξέρετε γιατί.

πηγή: huangxuan

5. Εργαστείτε για τις δεξιότητές σας πειθούς.

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

Τι μπορείτε να κάνετε; Απλά τον απομακρύνετε από αυτό:

"Ω, δεν μπορούμε να το ζωντανέψουμε γιατί θα σπάσει την προσβασιμότητα του site μας".
"Οι μεταβαλλόμενες προβολές δείχνουν απλά κακό στο κινητό, πιστέψτε με."
"Κάρτες υλικού; Είμαστε ακόμα το 2015 ;! "
"Pffff, όπως το Facebook ;! Βάλουν το CSS στο JS τους! Αυτοί οι τύποι είναι τρελοί! "

Συνεχίστε με αυτό μέχρι να είναι εντάξει με τον τυπικό ιστότοπο πρότυπου εκκίνησης Bootstrap.

πηγή: giphy

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

Εάν σας άρεσε αυτό το post, παρακαλώ πατήστε το κουμπί "προτείνουμε" παρακάτω και μοιραστείτε αυτήν την ιστορία. Θα ήθελα επίσης να ακούσω τα σχόλιά σας. Ευχαριστώ!

Αρχικά δημοσιεύθηκε στο shem8.github.io στις 25 Αυγούστου 2017.