Όλοι κάνουμε λάθη στον κώδικά μας. Συμβαίνει! Ξέρω ότι αν είχα ένα από εκείνα τα σημάδια «Days After Last Mistake» να κρέμεται πάνω από το γραφείο μου, ένα μεγάλο αυγό χήνας θα αιωρείται από πάνω μου όλη την ώρα. Δεν χρειάζεται να είναι και μεγάλα λάθη. Ο αδέξιος εαυτός μου έχει διαπράξει μικρά λάθη σε repos που κυμαίνονται από τυπογραφικά λάθη μέχρι την ολοκλήρωση των καταλόγων λειτουργιών npm.
Ωωωωωωω.
Αυτό είναι ένα από τα πράγματα που μου αρέσουν πολύ στο CSS: είναι επιεικής. Εάν δεν καταλαβαίνει ένα τυπογραφικό λάθος, συνεχίζει να αναζητά τον καταρράκτη αναζητώντας ένα ταίρι. Τίποτα από αυτά όπου ένας παράξενος χαρακτήρες σπάει έναν ιστότοπο και δεν αιχμαλωτίζει. Αλλά εξακολουθεί να είναι ενοχλητικό όταν εμφανίζονται λάθη CSS!
Όπως αυτό, βρίσκω τον εαυτό μου να κάνει περισσότερες φορές από όσες θα ήθελα να παραδεχτώ:
.element {
display: flexbox; /* 🤦♂️ */
}Ή όταν προσπαθώ να ορίσω μια κλίση χωρίς α background ιδιοκτησία:
.gradient {
linear-gradient(45deg, rgb(50% 100% 90%), rgb(62% 85% 93%));
}Μισώ πόσο κοντά X και C είναι σε ένα πληκτρολόγιο γιατί δεν μπορώ να μετρήσω πόσες φορές σκέφτομαι κάτι και λάθος px for pc μονάδες.
.element {
font-size: 16pc; /* I meant pixels! */
}Ένα άλλο λάθος CSS που καταλαβαίνω κάθε τόσο είναι ένα που ξέρω ότι κάνουν πολλοί άλλοι επειδή το εντοπίζω πολύ συχνά σε αναρτήσεις ιστολογίου με αποσπάσματα κώδικα:
// This is not a CSS comment.
.element {
/* This is a CSS comment. */
}Έχετε ξεχάσει ποτέ να χρησιμοποιήσετε var() γύρω από μια μεταβλητή CSS; Σίγουρα έχω.
.element {
color: --primary-color;
}Μιλώντας για μεταβλητές CSS, είναι δύσκολο να τις ονομάσουμε (όπως όλα τα άλλα) και συχνά χρησιμοποιώ κάποια λανθασμένη έκδοση μιας μεταβλητής που ονόμασα!
:root {
--color-primary: #FF5722;
--color-secondary: #3E2723;
}
/* Much later on... */
.element {
color: var(--primary-color); /* 🙃 */
}Ναι, όντως έχω αντιγράψει ένα απόσπασμα του CSS στο παρελθόν μόνο για να εμποδίσουν φανταχτερά αποσπάσματα να το κάνω να λειτουργήσει:
.element::before {
content: “”; /* Should be "" */
}Και, ναι, έχω ξοδέψει πάρα πολύ καιρό για να καταλάβω ότι αυτά τα αποσπάσματα ήταν το ένοχο.
Κοιτάζοντας αυτό το τελευταίο μου θυμίζει ότι μερικές φορές ξεχνάω να ρυθμίσω το content ιδιοκτησία όταν εργάζομαι με ::before or ::after. Κάτι που μου θυμίζει πώς ξέχασα να ορίσω ένα στοιχείο position πριν προσπαθήσετε να το αντισταθμίσετε ή να το αλλάξετε z-index. Σοβαρά, συμβαίνουν αυτά!
Είναι δύσκολο να μιλάς για λάθη
Έχετε τελειώσει ποτέ να διαβάζετε κάποια ανάρτηση ιστολογίου που μοιράζεστε κάποιο καταπληκτικό κόλπο και νιώσατε κάποιου είδους σύνδρομο απατεώνα; Νομίζω ότι αυτό οφείλεται σε μεγάλο βαθμό επειδή οι αναρτήσεις ιστολογίου συχνά συγκαλύπτουν την πραγματική δουλειά - και τις αποτυχίες - που οδηγούν σε εκπληκτικά κόλπα. Ως κάποιος που διαβάζει τέτοιες αναρτήσεις για τα προς το ζην, μπορώ να σας πω ότι πολλοί, αν όχι η συντριπτική πλειοψηφία, περνούν από πολλούς γύρους επεξεργασίας όπου τα δυνητικά ενοχλητικά λάθη εξαλείφονται και εξομαλύνονται.
Ακόμη και αυτά τα γελοία φοβερά άρθρα πρέπει να αποτύχουν πριν τα αποκτήσουν όλα αυτά ωωωωω και αχχχχς.
Το ίδιο ισχύει για οποιαδήποτε εφαρμογή, ιστότοπο, επίδειξη ή οτιδήποτε άλλο συναντήσετε. Οι πιθανότητες να βγει τέλειος την πρώτη φορά είναι σχεδόν καθόλου.
Αλλά αν είμαι απόλυτα ειλικρινής μαζί σας, συχνά εκπλήσσομαι (και με ενδιαφέρει) περισσότερο ταξίδι χρειάζεται για να πετύχεις κάτι, κονδυλώματα και όλα. Το ταξίδι είναι μια ματιά στο πώς είναι σκεφτείτε σαν προγραμματιστής front-end. Εκεί συμβαίνει η πραγματική (και η πιο πολύτιμη) μάθηση.
Και όλα αυτά απλώς στηρίζονται σε αυτό που πραγματικά θέλω να ρωτήσω…
Ποια είναι τα πιο χαζά λάθη σας στο CSS;
Έλα, όλοι ξέρουμε ότι έχεις φτιάξει μερικά! Ας μάθουμε από αυτούς!
